微信小程序通过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子页面:


©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 昨天看了一下微信小程序官方文档,总结一下自己学习的个人心得. 首先从官方文档给的框架说起,微信小程序官方文档给出了...
    Mr大大大阅读 47,331评论 9 68
  • WXML WXML(WeiXin Markup Language)是微信的一套标签语言,结合基础组件、事件系统,可...
    许剑锋阅读 11,832评论 3 51
  • 1. 拉斯科洞穴 旧石器时代晚期。颜料是矿物质混合动物油脂制成,使用了红黄粟黑等多种色调。丰富的动物形象。石灰质岩...
    毛君阅读 4,567评论 0 0
  • 空间与地址分配 将不同的*.o文件组合成一个可执行文件时,各个文件中各个段的排列顺序。 在将各个.o文件合并成一个...
    Myth52125阅读 1,235评论 0 0
  • 文可胜武。什么事不可较真,因为你是大人了,可能你的心智没完全的成熟,但你得做个不动声色的大人了。要像父亲...
    韩韩的小天地阅读 975评论 0 0