微信小程序组件的自定义属性用法
2018-10-09 11:53
393 查看
要将postld由post页面传递到post-detail页面,首先需要在post.js中获取到postId, 随后再将postId附加到代码中的wx.navigateTo发url中。 要想在post.js中获取到postId,就必须知道当前点击的文章是哪一篇文章。我们首先将postId绑定到每一篇文章的wxml中,使postld成为文章wxml的一个属性。绑定postId的方法很简单,就如同绑定文章date、title等属性一样。post.js文件的代码无须任何改动,只需要对post.wxml文件做一下改动即可。
以上代码中,我们在view里增加了一个属性data-post-id="{{item.postId}}",先来看看以上代码有什么效果。保存并运行代码后,打开调试中的【wxml】这个面板,文章页面的骨架如图所示
从图中可以很明显地看到,每篇文章的id号都被绑定在了该文章的view容器上,剩下的工作就是,如何在post.js中获取当前点击的文章的id号。修改post.js文件中的onTapToDetail函数如下:
上述代码中,我们通过event.currentTarget.dataset.postId,这段代码成功地拿到了当前文章的postId。event事件对象是由MINA框架在调用onTapToDetail函数时传递的参数。在event事件对象中,有一个currentTarget代表事件绑定的当前组件。重点是dataset对象,dataset对象里包含当前组件中所有属性名以data-开头的自定义属性值。我们在代码中的view上绑定了data-post-id,所以通过dataset.postId将卡可以拿到当前组件的postId。
阅读更多相关文章推荐
- 微信小程序编写tabBar模板,map组件markers属性动态初始化
- 微信小程序自定义组件简单实现
- 微信小程序用户自定义模版用法实例分析
- 微信小程序编写tabBar模板,map组件markers属性动态初始化
- 手把手教你实现微信小程序中的自定义组件
- 微信小程序——自定义组件
- 微信小程序的组件用法与传统HTML5标签的区别
- 微信小程序之自定义组件
- 微信小程序自定义属性
- 微信小程序各类型的自定义组件篇
- 微信小程序loading组件显示载入动画用法示例【附源码下载】
- 微信小程序自定义组件--对话框
- 微信小程序的组件用法与传统HTML5标签的区别
- 微信小程序 image组件的mode属性 以及 图片出现横向滚动轴
- 自定义微信小程序视频组件播放按钮
- 微信小程序——监听点击事件,自定义属性
- 微信小程序的组件用法与传统HTML5标签的区别
- 微信小程序自定义tabBar组件开发
- 微信小程序自定义组件
- 微信小程序开发《11 .框架之自定义组件》