微信小程序(七)文章詳情頁面動態顯示

文章詳情頁面動態顯示(即點擊某個文章就跳轉到相應文章的詳情頁):
思路:在文章列表頁面添加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代碼以下:ui

<!--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代碼以下:this

// 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 () {

},
相關文章
相關標籤/搜索