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


©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 217,185评论 6 503
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,652评论 3 393
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 163,524评论 0 353
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,339评论 1 293
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,387评论 6 391
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,287评论 1 301
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,130评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,985评论 0 275
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,420评论 1 313
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,617评论 3 334
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,779评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,477评论 5 345
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,088评论 3 328
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,716评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,857评论 1 269
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,876评论 2 370
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,700评论 2 354

推荐阅读更多精彩内容

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