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

迷南。 2023-07-13 15:12 124阅读 0赞

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

1.  在 `list.js`中，可以定义 `toDetail` 方法，传入 `event`事件对象，可以 控制台打印一下 ，如图所示：  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjYxNDA4MA_size_16_color_FFFFFF_t_70]
2.  通过控制台打印可以发现，`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,
        })
      }

1.  在详情页 `detail.js` 中，可以通过`onLound`生命周期函数，传入 `options`参数，页就是在页面一开始加载的时候就会执行，我们可以控制台打印一下，如图所示：  
    ![在这里插入图片描述][20200313000604427.png]
2.  通过控制台打印可以发现，`options.index`就是从列表页传入详情页的 `index`的值，我们就可以获取这个参数值，通过这个参数值找到数据的相应项，在`data`中定义`detailObj`对象，默认为空对象，定义`index`的值，默认为`null`，代码如下：

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

1.  在`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
        })
      }

1.  在 控制台的 `AppData`选项中，就可以看到详情页的数据，保存在 `detailObj` 对象中
2.  渲染`detailObj`中详情的数据，代码如下所示：

<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>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjYxNDA4MA_size_16_color_FFFFFF_t_70]: /images/20230529/cd5d073774cf49a2ae95bc4fb8d27c1a.png
[20200313000604427.png]: /images/20230529/93f7026e8fef4a1896a20836bf7d17d6.png