微信小程序中詳情頁數據動態實現的方法介紹

這篇文章給大家分享的是有關微信小程序中詳情頁數據動態實現的方法介紹的內容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

首先實現點擊list頁面會跳轉到detail頁面
給list頁面中添加點擊事件

list.js

//點擊跳轉到detail頁面
  toDetail(event){    
  // console.log(event);
   //獲取點擊跳轉對應的下標
    let index = event.currentTarget.dataset.index
    wx.navigateTo({
      url: '/pages/detail/detail?index='+index,
    })
  },

上面console.log(event)的內容如下:

這樣我們就把點擊跳轉的下標拿到并傳遞給detail頁面了
在detail.js中獲取數據,獲取數據要記得先把數據引進來:

// pages/detail/detail.js
let datas = require('../../datas/list-data.js');
Page({  
/**
* 頁面的初始數據
*/
  data: {
    detailObj:{},
    index:null
  }, 
  /**
   * 生命周期函數--監聽頁面加載
   */
  onLoad: function (options) {
    let index=options.index;    
    this.setData({      
    //把引入的數據根據下標對應放到detailObj中
      detailObj:datas.list_data[index],      
      //index也存放起來
      index:index
    })
  },

然后在detail.wxml中展示就可以了

<!--pages/detail/detail.wxml--><view class='detailContainer'>
  <image class='headImg' src='{{detailObj.detail_img}}'></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 src='/images/icon/collection-anti.png'></image>
      <image src='/images/icon/share-anti.png'></image>
    </view>
    <view class='line'></view>
  </view>
  <button>轉發此文章</button>
  <text class='content'>{{detailObj.detail_content}}</text></view>

感謝各位的閱讀！關于“微信小程序中詳情頁數據動態實現的方法介紹”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！