项目场景:
最近写一个微信小程序,使用抽屉组件,需要获取点击事件数据
问题描述:
bindtap=“showModal1” data-target=“Modal” data-personInfo="{{drawerPeople[index]}}"使用e.currentTarget.dataset.personInfo怎么都获取不到数据,找不到原因
<!-- 抽屉 人员列表-->
<view class="cu-modal drawer-modal justify-start {{modalName=='DrawerModalL'?'show':''}}" bindtap="hideModal">
<view class="cu-dialog basis-lg" catchtap style="top:{{CustomBar}}px;height:calc(100vh - {{CustomBar}}px)">
<scroll-view class="scrollList" scroll-y style="height:calc(100vh - {{CustomBar}}px)">
<view class="cu-list menu text-left">
<view class="cu-item arrow" wx:for="{{drawerPeople}}" wx:key="index" bindtap="showModal1" data-target="Modal" data-personInfo="{{drawerPeople[index]}}">
<view class="content">
<text class="cuIcon-github text-grey"></text>
<text class="text-grey">{{item.personName}}</text>
</view>
</view>
</view>
</scroll-view>
</view>
</view>
<!-- 抽屉 人员列表-->
原因分析:
通过console.log(e)发现e.currentTarget.dataset.personInfo中personInfo变成了personinfo,大写变小写了,变量名改变导致无法获取变量数据,由此猜测这里变量名只能采用全小写命名,“date-name”中name字段名称不能用大写,从wxml传给js的时候,大写变量名自动变全小写,导致获取不到变量数据。
<hr style=" border:solid; width:100px; height:1px;" color=#000000 size=1">
{type: "tap", timeStamp: 35913, target: {…}, currentTarget: {…}, mark: {…}, …}
changedTouches: [{…}]
currentTarget:
dataset:
personinfo: {_id: "", …}
target: "Modal"
__proto__: Object
id: ""
offsetLeft: 0
offsetTop: 210
解决方案:
将“date-name”中name字段名称改用全小写,解决问题。