微信小程式實例：詳情頁資料動態實作的方法介紹

這篇文章帶給大家的內容是關於微信小程式實例：detail詳情頁資料動態展示的方法介紹 ，有一定的參考價值，有需要的朋友可以參考一下，希望對你有所幫助。

上一篇文章微信小程式實例：詳情頁靜態頁面搭建的方法介紹把靜態的detail頁面做好了,現在來做把資料動態的放進去
先實作點擊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=&#39;detailContainer&#39;>
  <image class=&#39;headImg&#39; src=&#39;{{detailObj.detail_img}}&#39;></image>
  <view class=&#39;avatar_date&#39;>
    <image src=&#39;{{detailObj.avatar}}&#39;></image>
    <text>{{detailObj.author}}</text>
    <text>发布于</text>
    <text>{{detailObj.date}}</text>
  </view>
  <text class=&#39;company&#39;>{{detailObj.title}}</text>
  <view class=&#39;collection_share_container&#39;>
    <view class=&#39;collection_share&#39;>
      <image src=&#39;/images/icon/collection-anti.png&#39;></image>
      <image src=&#39;/images/icon/share-anti.png&#39;></image>
    </view>
    <view class=&#39;line&#39;></view>
  </view>
  <button>转发此文章</button>
  <text class=&#39;content&#39;>{{detailObj.detail_content}}</text></view>

相關推薦：

微信小程式實作動態設定頁面標題方法分享

微信小程式 資料存取實例詳解

#

以上是微信小程式實例：詳情頁資料動態實作的方法介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章！