微信小程序如何实现列表数据的详情页功能

1. 微信小程序点击列表页进入详情页，在列表页 list.wxml中，对于每一个数据项，可以通过 catchtap去绑定一个事件，去详情页的事件 toDetail。 对于详情页的传输数据，点击事件可以通过 data- 去实现，后面相当于是键值对，data-index="{{index}}"，意思是传输的值的名字叫index，值为 index，代码如下：

<block wx:for="{{listArr}}" wx:key="{{index}}">
    <view catchtap="toDetail" data-index="{{index}}">
      <!-- 引入模版的数据 -->
      <template is="listTmp" data="{{...item}}"/>
    </view>
  </block>

2. 在 list.js中，可以定义 toDetail 方法，传入 event事件对象，可以 控制台打印一下 ，如图所示：
   

3. 通过控制台打印可以发现，event.currentTarget.dataset.index 的值就是从列表页传过来的 index 的值，通过这个值就可以获取点击对应的下标。之后，就可以通过 wx.navigateTo 进行详情页的跳转，通过拼接的 index的值。需要注意 wx.navigateTo会触发页面隐藏 onHide， wx.redirectTo会触发页面卸载 onUnload，代码如下：

// 点击进入详情页
  toDetail: function (event) {
    // 获取 event 事件对象
    console.log(event)
    // 获取点击对应的下标
    const index = event.currentTarget.dataset.index

    //wx.navigateTo 会触发页面隐藏onHide
    wx.navigateTo({
      url: '/pages/detail/detail?index=' + index,
    })
  }

4. 在详情页 detail.js 中，可以通过onLound生命周期函数，传入 options参数，页就是在页面一开始加载的时候就会执行，我们可以控制台打印一下，如图所示：
   

5. 通过控制台打印可以发现，options.index就是从列表页传入详情页的 index的值，我们就可以获取这个参数值，通过这个参数值找到数据的相应项，在data中定义detailObj对象，默认为空对象，定义index的值，默认为null，代码如下：

/**
   * 页面的初始数据
   */
  data: {
    detailObj: {},
    index: null,
    isCollected: false,
    isMusicPlay: false
  }

6. 在detail.js 中，在onLound生命周期函数中，可以通过 this.setData方法，将 detailObj的值修改为 datas.list_data[index]数据的相应的下标值，这样就可以拿到详情页的数据了，代码如下所示：

/**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    console.log(options)
    // 获取参数值
    let index = options.index
    // 更新data中的detailObj的值
    this.setData({
      detailObj: datas.list_data[index],
      index
    })
  }

8. 在 控制台的 AppData选项中，就可以看到详情页的数据，保存在 detailObj 对象中

9. 渲染detailObj中详情的数据，代码如下所示：

<!--pages/detail/detail.wxml-->
<view class="detailContainer">
  <image class="headImg" src="{{detailObj.detail_img}}"></image>
  <image catchtap="handleMusicPlay" class="musicImg" src="{{isMusicPlay ? '/images/music/music-start.png' : '/images/music/music-stop.png'}}"></image>
  <view class="avatar_date">
    <image src="{{detailObj.avatar}}"></image>
    <text>{{detailObj.author}}</text>
    <text>发布于</text>
    <text>{{detailObj.date}}</text>
  </view>
  <text class="company">{{detailObj.title}}</text>
  <view class="collection_share_container">
    <view class="collection_share">
      <image catchtap="handleCollection" wx:if="{{!isCollected}}" src="/images/icon/collection-anti.png"></image>
      <image catchtap="handleCollection" wx:if="{{isCollected}}" src="/images/icon/collection.png"></image>
      <image catchtap="handleShare" src="../../images/icon/share.png"></image>
    </view>
    <view class="line"></view>
  </view>
  <button open-type="share">转发文章</button>
  <text class="content">{{detailObj.detail_content}}</text>
</view>