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子页面:

网友评论