来看这样一个需求,有一个列表页,点击item的时候要把对应的标题和内容传到下一个页面
列表页
详情页
有了需求,咱们就开始干
1.配置item的数组,从接口获取,在.js文件中的onReady函数中完成网络请求
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
var page = this;
wx.request({
url: this.data.base_url + '/' + this.data.url,
data: {
size: '4',
},
header: {
// !!!这个参数要注意,post的时候要带上,否则服务器收不到post请求的数据
"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创建布局并绑定一个点击事件,使用data-添加自定义数据.这里我们要使用title和desc两个数据,就按照如下方式写:
<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文件的点击事件中获取当前点击的view的绑定数据,并传递给下一个页面
页面跳转传递参数是采用url加参数的形式
navToDetailPage: function(option) {
//option就是点击的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.在详情页读取列表页传递来的两个参数
//---------------.js------------------
/**
* 页面的初始数据
*/
data: {
title:'',
desc:''
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
console.log(options);
this.setData({
title: options.title,
desc: options.desc
});
},
//---------------.wxml------------------
<view class="rootview">
<text class="title">标题:{{title}}</text>
<text class="desc">内容:{{desc}}</text>
</view>
