文章詳情頁面動態顯示（即點擊某個文章就跳轉到相應文章的詳情頁）：
思路：在文章列表頁面添加catchtop事件，在js文件中獲取文章的index,並用wx.navigateTo中的
url拼接詳情頁的地址和文章的index,(在該操作之前該js應該已引入靜態數據，在data中定義相應數據，
並更新數據，在詳情頁的js中也同樣如上，詳情看demo)，列表頁面事件添加完畢后，詳情頁需要接收數據
（index和文章內容），這就用到了，詳情頁的生命周期函數options來接收值.
為每個文章添加事件:
<block wx:for='{{listArr}}' wx:key='{{index}}'> <view catchtap="toDetail" data-index='{{index}}'> <template is='listTmp' data='{{...item}}'/> </view> </block>
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.data}}</text> </view> <text class="company">{{detailObj.title}}</text> <view class="collection_share_container"> <view class="collection_share"> <image src="/static/images/sc.png"></image> <image src="/static/images/share2.png"></image> </view> <view class="line"></view> </view> <button>轉發此文章</button> <text class="content">{{detailObj.detail_content}}</text> </view>
detail.js代碼如下：
// pages/detail/detail.js
let datas=require('../data/list-data.js');
console.log(datas);
Page({
/**
* 頁面的初始數據
*/
data: {
datailObj:{},
index:null
},
/**
* 生命周期函數--監聽頁面加載
*/
onLoad: function (options) {
console.log(options);
//獲取list頁面傳來的參數值
let index = options.index;
//更新data中的detailObj的狀態值
this.setData({
detailObj:datas.list_data[index],
index //同名參數值可以省略不寫（index:index）
});
},
/**
* 生命周期函數--監聽頁面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函數--監聽頁面顯示
*/
onShow: function () {
},