微信小程序学习笔记-2.2 实现详情页的访问

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,
    })
    
  },

4.显示