微信小程序data-xx 的使用

data-xx 的作用是在事件中可以获取这些自定义的节点数据，用于事件的逻辑处理

比如 写一个list列表 想知道点击的list列表的那一个item ,比如获取点击的图片,等等

使用data-xx 需要注意的 xx 是自己取的名字, 后面跟着的渲染一定要是使用的值,否则无效

比如点击的是list 后面跟的是list的值,如果是图片后面就要是图片url的地址,

一个demo

不如现在要点击一个list ,一个图片 以及一个text 我们查看log日志

写一个这样的布局

wxml

<view class="container log-list">
   <view class='list_view' wx:for="{{list}}" wx:key="index" bindtap='list_click' data-msg='{{item}}'>
    <view>{{item.name}}</view>
   </view>
   <image src="{{url}}" bindtap='click' data-msg='{{url}}'></image>
   <text data-msg="{{txt}}"bindtap='click1'>{{txt}}</text>
</view>

data-msg 这个msg就是自己取的名字,假如我取名data-id 等等,都是可以的

刚才我说了后面跟着的值,一定要是使用的值

看下图 获取就明白了,里面的值不要随意得写

js代码

Page({

  /**
   * 页面的初始数据
   */
  data: {

    list:[
       {"name":"北京"},
       { "name": "上海" },
       { "name": "河南" },
       { "name": "河南" },
       { "name": "广州" },
       { "name": "湖北" },
     
    ],
    url:"../../images/2.jpg",
    txt:"点击我查看log日志"
  },

  list_click:function(e){
    console.log(e)
    console.log(e.currentTarget.dataset.msg.name)
  },

  click:function(e){
   console.log(e)
  },

  click1:function(e){
   console.log(e)
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options){
   

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
    
  },
})

点击下广州查看日志

点击下图图片查看日志

点击下文字查看日志

 

获取到值我们就可以就行逻辑判断了,比如我之前写过的点击切换图片 ................