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 textid:{{id}}/text text标题:{{name}}/text text元素:{{element}}/text text描述:{{des}}/text/view3）了解一下 微信切换页面的三个函数。因为和之前讲的 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}}'来获取数据
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, }) },
