您的位置:首页 > 移动开发 > 微信开发

微信小程序组件的自定义属性用法

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。

阅读更多
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: