微信小程序中詳情頁數(shù)據(jù)動態(tài)實現(xiàn)的方法介紹

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

首先實現(xiàn)點擊list頁面會跳轉(zhuǎn)到detail頁面
給list頁面中添加點擊事件

list.js

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

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

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

// pages/detail/detail.js
let datas = require('../../datas/list-data.js');
Page({  
/**
* 頁面的初始數(shù)據(jù)
*/
  data: {
    detailObj:{},
    index:null
  }, 
  /**
   * 生命周期函數(shù)--監(jiān)聽頁面加載
   */
  onLoad: function (options) {
    let index=options.index;    
    this.setData({      
    //把引入的數(shù)據(jù)根據(jù)下標對應放到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>發(fā)布于</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>轉(zhuǎn)發(fā)此文章</button>
  <text class='content'>{{detailObj.detail_content}}</text></view>

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