dataset属性
微信小程序中我们的所有函数当中都有一个事件处理函数,其参数名为event，打印后有一系列参数，在这当中，存放我们标签自定义属性的参数是currentTarget下的dataset，在我们标签中并没有设置自定义属性事，会发现dataset属性里面是空的
自定义属性格式：data-*
定义属性的格式只需要在data-后面添加自定义的属性名即可
<block wx:for='{
{post_key}}' wx:key="key" wx:for-item='item'>
<view catchtap='onPostTap' data-postid="{
{item.postId}}">
<template is='postItem' data='{
{...item}}' />
</view>
</block>
data- 绑定多个数据
- 我们点击组件时，可以通过data- 传递数据，传多条数据可以用 data-xxx=’{ {[xxx,xxx]}}’ 来传递数据
<view class="hot-container" hidden="{
{tapShow}}">
<view class="film-container" wx:for="{
{hot}}" >
<image src="{
{item.src}}" class="hot-image">
<image src="/images/hot/bf.png" class="bf"></image>
</image>
<view class="text-container">
<text class="text-name">{
{item.name}}</text>
<text class="text-type">{
{item.type}}</text>
<text class="text-act">{
{item.act}}</text>
<text class="text-place">{
{item.place}}</text>
</view>
<view class="r-container">
<view class="mark-container">
<text>{
{item.mark}}</text>
<text class="fen">分</text>
</view>
<button class="btn" size="mini" bind:tap="buy" data-film="{
{[item.src,item.name,item.type,item.mark]}}">购票</button>
</view>
</view>
</view>
//wx.navigateTo传递动态数据的话用es6模板字符串
buy:function(e){
let film=e.target.dataset.film
wx.navigateTo({
url: `/pages/detail/detail?url=${film[0]}&&name=${film[1]}&&type=${film[2]}&&mark=${film[3]}`,
})
},
如何利用
获取
event.currentTarget.dataset.自定义的属性名
- 在js里面获取的时候必须要写成小写，不管在wxml里写的是驼峰还是什么，在js获取的时候必须是小写要不就获取不到，一定得是小写哦。
- data-后面的名字会转换为小写了,所以data-postid="{ {item.postId}}“和data-POSTID=”{ {item.postId}}"，获取值的时候都是这样：
onPostTap(event){
let postId=event.currentTarget.dataset.postid;
console.log(postId);
}
//currentTarget是你当前点击的对象，dataset就是你自定义属性的集合
//wxml
<view class='box' bindtap='getValue'>
<view class='first' data-num="1024" data-name="张三">第一个view</view>
<view class='second' data-age="2017" data-con="李四">第二个view</view>
</view>
//js
getValue(e){
const first = e.target.dataset.name,
const second = e.target.dataset.conbn
}
//wxml
<view class='zright' bindtap='choseCoupon' data-info='{
{item}}' data-id='{
{index}}'>
//js
choseCoupon: function (e) {
console.log(e.currentTarget.dataset.id)
console.log(e.currentTarget.dataset.info)
}
其他
通过js操作自定义属性，HTML5中元素都会有一个dataset的属性，这是一个DOMStringMap类型的键值对集合
这是一个DOMStringMap类型的键值对集合
使用JavaScript操作dataset有两个需要注意的地方
1.我们在添加或读取属性的时候需要去掉前缀data-*，像上面的例子我们没有使用test.dataset.data-my = ‘Byron’;的形式
2. 如果属性名称中还包含连字符(-)，需要转成驼峰命名方式，但如果在CSS中使用选择器，我们需要使用连字符格式
3. 读取的时候也是通过dataset对象，使用”.”来获取属性，同样需要去掉data-前缀，连字符需要转化为驼峰命名