2018/5/26
继上 2.2
实现了 swiper 功能后,访问详细页肯定也是我们所需要的。
本章将涉及 页面间的数据传递 和 事件相应相关内容
1.前期准备
创建 detial 详情页 并在 app.json 中注册
1)扩增上一节的页面内容 太少了不好显示
testList: [
{
name: "测试1",
element: "测试1的相关内容",
isHighLighted: true,
des:'这是用来显示的内容----测试1',
id: 1
},
{
name: "测试2",
element: "测试2的相关内容",
des: '这是用来显示的内容----测试2',
isHighLighted: false,
id: 2
}],
随便加点就行了
2)写 detail.wxml 用来显示
<view>
<text>id:{{id}}</text>
<text>标题:{{name}}</text>
<text>元素:{{element}}</text>
<text>描述:{{des}}</text>
</view>
3)了解一下 微信切换页面的三个函数。因为和之前讲的 navigation 那一块极为类似,在此不重复。我们用最后一个。
wx.switchTab
wx.redirect
wx.navigateTo
2.绑定事件和数据
在上一笔记的 swiper-item 中的 view 添加至如下
<view class='container' bindtap='f0' data-id='{{item.id}}' data-name='{{item.name}}' data-des='{{item.des}}'>
data- 自定义的数据。会在事件中被封装在对象里。具体可以通过
event.getCurrentTarget.dataset
来获取数据
3.传递数据
1)main.js 书写函数
f0: function (event) {
var id = event.currentTarget.dataset.id
var name = event.currentTarget.dataset.name
var des = event.currentTarget.dataset.des
wx.navigateTo({
url: '../detail/detail?id=' + id + '&des=' + des + '&name=' + name,
})
},
切记:这边的 url 应是上述写法。否则会因为层级关系默认寻找 pages/main/ 目录下的文件
navigateTo 中的 url 会根据页面 url 定向跳转 后面可以通过 "?" 带参
2) detail.js onLoad 函数获取传入的信息 并赋值给 data
onLoad: function (options) {
var id = options.id
var name = options.name
var des = options.des
this.setData({
id:id,
name:name,
des:des,
})
},