來(lái)看這樣一個(gè)需求,有一個(gè)列表頁(yè),點(diǎn)擊item的時(shí)候要把對(duì)應(yīng)的標(biāo)題和內(nèi)容傳到下一個(gè)頁(yè)面
列表頁(yè)
詳情頁(yè)
有了需求,咱們就開(kāi)始干
1.配置item的數(shù)組,從接口獲取,在.js文件中的onReady函數(shù)中完成網(wǎng)絡(luò)請(qǐng)求
/**
* 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面初次渲染完成
*/
onReady: function () {
var page = this;
wx.request({
url: this.data.base_url + '/' + this.data.url,
data: {
size: '4',
},
header: {
// !!!這個(gè)參數(shù)要注意,post的時(shí)候要帶上,否則服務(wù)器收不到post請(qǐng)求的數(shù)據(jù)
"Content-Type": "application/x-www-form-urlencoded"
},
method: 'post',
dataType: '',
success: function (res) {
page.setData({
array: res.data.data,
});
},
fail: function (res) {
// console.log(res);
},
complete: function (res) {
// console.log(res.data);
},
})
},
2.在.wxml中用wx:for創(chuàng)建布局并綁定一個(gè)點(diǎn)擊事件,使用data-添加自定義數(shù)據(jù).這里我們要使用title和desc兩個(gè)數(shù)據(jù),就按照如下方式寫(xiě):
<view class="topic">
<view class="topic_item" wx:for="{{array}}" wx:key="aa" wx:for-index="idx" wx:for-item="item" bindtap="navToDetailPage" data-desc="{{item.description}}" data-title="{{item.title}}">
<image class="topic_item_image" src="{{item.thumb}}" mode="aspectFill"></image>
<text>{{item.title}}</text>
</view>
</view>
3.在.js文件的點(diǎn)擊事件中獲取當(dāng)前點(diǎn)擊的view的綁定數(shù)據(jù),并傳遞給下一個(gè)頁(yè)面
頁(yè)面跳轉(zhuǎn)傳遞參數(shù)是采用url加參數(shù)的形式
navToDetailPage: function(option) {
//option就是點(diǎn)擊的view的data-title和data-desc
console.log(option);
wx.navigateTo({
url: '../VideoDetail/VideoDetail?desc=' + option.currentTarget.dataset.desc+'&title='+option.currentTarget.dataset.title,
success: function(res) {
console.log(res);
},
fail: function(res) {},
complete: function(res) {},
})
},
hotvideotap: function(option) {
wx.setNavigationBarTitle({
title: option.currentTarget.dataset.id,
success: function(res) {},
fail: function(res) {},
complete: function(res) {},
})
},
4.在詳情頁(yè)讀取列表頁(yè)傳遞來(lái)的兩個(gè)參數(shù)
//---------------.js------------------
/**
* 頁(yè)面的初始數(shù)據(jù)
*/
data: {
title:'',
desc:''
},
/**
* 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面加載
*/
onLoad: function (options) {
console.log(options);
this.setData({
title: options.title,
desc: options.desc
});
},
//---------------.wxml------------------
<view class="rootview">
<text class="title">標(biāo)題:{{title}}</text>
<text class="desc">內(nèi)容:{{desc}}</text>
</view>
