微信小程序通过postId跳转对应的子页面

data.simulate.js  模拟数据页

模拟数据

grades.wxmll：主页面

将catchtap跳转事件注册到view组件上（catchtap="onDetailTap"），自定义组件的属性，获取到模拟数据data.simulate.js的postId（data-postId="list.postId"）

接收成功

grades.js 主页面

在grades.js里接收grades.wxml 传过来的postid的值，并通过navigateTo（跳转函数）发送给grades_detail.wxml页面

event事件对象是由MINA框架在调用onDetailTap函数时传递的参数（方法）

在event事件对象中，有一个currentTarget代表事件绑定的当前组件（postId0~9的view）

重点是dataset对象,dataset对象里包含当前组件中所有属性名以data,开头的自定义属性值.因为的view上绑定了data-post-id,所以通过dataset.postid将可以拿到当前组件的postId（拿到postId的编号）。

组件自定义属性名有以下规则：

必须以data-开头

多个单词由连字符“-”链接

单词中最好不要有大写字母，如果有大写字母，除单词第一个字母外，其余大写字母将被转化成小写

在js中获取自定义属性值时，多个单词将被转化驼峰命名

组件的属性定义

在获取到postId后，我们将postId附加在导航Url的query参数中，发送到grades_detail子页面：

wx.navigateTo({

      url: '../grades/grades_detail/grades_detail?id='+postTest,

    })

grades_detail.js子页面：

子页面也需要引入 本地模拟的数据文件

接收post主页面传递的参数方法是，通过子页面onLoad函数里的options参数在页面加载时获取传递过来的值。

postsData.postlist 是模拟的本地数据列表，是一个对象，我们需要的是把列表中的数据传递出去，所以取的这对象里的是数组中的一个[postId]

使用this.setData绑定该数据，并赋值给post

grades_detail.wxml子页面：