网页设计与网站开发基础教程,郑州网站建设贴吧,个人网站首页布局,商家怎么入驻微信小程序我们在把数据显示到页面的时候#xff0c;为了实现良好的互动#xff0c;都希望在用户点击某个栏目后#xff0c;获取这个栏目的捆绑数据#xff0c;然后执行后续的操作。 例如#xff0c;从数据库里取出对应的记录后#xff0c;显示在页面上#xff0c;是一条条的大横条… 我们在把数据显示到页面的时候为了实现良好的互动都希望在用户点击某个栏目后获取这个栏目的捆绑数据然后执行后续的操作。 例如从数据库里取出对应的记录后显示在页面上是一条条的大横条用户点击某个横条的时候就是选择了某条记录此时在js端就希望能获取用户点击的是哪条记录并且这个记录的各个字段从页面直接搬过来不用重新到数据库去查询了。 这里就要用到页面控件的“data-*”属性了显示页面数据时把数据记录显示在控件的各个data-*属性中需要的时候就从页面这些data-*属性里取出来。 例如我要把device_id变量的值存入页面中就可以写成 view data-deviceid{{device_id}} bindtaponBarTap点击获取数据/view 获取的时候在js里写 onBarTap(e){ var deviceIde.target.dataset.deviceid; //获取对应data-deviceid的存放数据 } 这样就可以获取data-deivceid里这个deviceid数据了要注意的是取出来的时候要注意去掉“data-”前缀。当然这里的“{{device_id}}”里的device_id必须是在js里的Page里的data要先赋值。 接下来给个简单的page做参考例如新建demo页面demo.wxss和demo.json都默认我们只是参考demo.wxml和demo.js两个源码。 demo.xml
!--pages/index/demo.wxml--
textpages/index/demo.wxml/text
viewbutton data-itemId{{item_id}} bindtapgetdata获取数据/button
/viewdemo.js
// pages/index/demo.js
Page({data: {item_id:DEVICE_000302938049898, //给item_id先赋个值},onLoad: function (options) {},getdata:function(e){console.log(e.target.dataset.itemid); //从页面取出来去掉前缀},
})这样第9行显示的结果就是DEVICE_000302938049898 总结存是利用js的公用数据data段的赋值直接刷新显示取是利用js里的传递过来的event就是上面的e里面的e.target.dataset.xxxx来获取要去掉data-前缀。
