我们在把数据显示到页面的时候,为了实现良好的互动,都希望在用户点击某个栏目后,获取这个栏目的捆绑数据,然后执行后续的操作。
例如,从数据库里取出对应的记录后,显示在页面上,是一条条的大横条,用户点击某个横条的时候,就是选择了某条记录,此时在js端,就希望能获取用户点击的是哪条记录,并且这个记录的各个字段从页面直接搬过来,不用重新到数据库去查询了。
这里就要用到页面控件的“data-*”属性了,显示页面数据时,把数据记录显示在控件的各个data-*属性中,需要的时候就从页面这些data-*属性里取出来。
例如,我要把device_id变量的值存入页面中,就可以写成:
获取的时候,在js里写:
onBarTap(e){
var deviceId=e.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-->
- <text>pages/index/demo.wxml</text>
- <view>
- <button data-itemId="{{item_id}}" bindtap="getdata">获取数据</button>
- </view>
demo.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-前缀。