小程序:路由函数的应用

来自CloudWiki
跳转至: 导航搜索

应用:从列表函数跳转到文章详情页面

创建详情页面

新建post-detail文件夹

在其内新建post-detail页面

绑定事件

post.html:

在post-container类上 添加事件绑定,绑定到事件onGoToDetail上

<view bind:tap="onGoToDetail" class="post-container">
                <view class="post-author-date">
                    <image wx:if="{{flag}}"class="post-author" src="{{item.avatar}}"></image>
                    <text wx:else class="post-date">{{item.date}}</text>
                </view>
                <text class="post-title">{{item.title}}</text>
                <image class="post-image" src="{{item.imgSrc}}"></image>
                <text class="post-content">{{item.content}}</text>
                <view class="post-like">
                    <!-- <image  class="post-like-image" src=" /images/icon/chat.png"></image> -->
                    <l-icon name="favor" size="32" color="#666" class="post-like-image" />
                    <text class="post-like-font">{{item.collection}}</text> 
                    <l-icon name="eye" size="32" color="#666" class="post-like-image" />
                    <!-- <image  class="post-like-image" src=" /images/icon/view.png"></image> -->
                    <text class="post-like-font">{{item.reading}}</text> 
                </view>
            </view>

创建事件

 
  onGoToDetail(event){
      wx.navigateTo({
        url:'/pages/post-detail/post-detail'
      })
  },