原生微信小程序view嵌套bindtap导致传输数据data-失效

131 阅读1分钟

在原生微信小程序中会遇到这么一个问题:

view 嵌套 view,发现被嵌套的view标签点击时候无法传输数据

index.wxml:

//父view标签,bindtap点击事件listClick,使用data-的方式进行数值传输
<view wx:for={{ list }} wx:key="id" wx:for-item="item"
    bindtap="listClick"
    data-params="{{ item }}" 
    style="width: 100%; height: 100rpx">
    //子view标签
    <view class="children" 
        style="width: 100rpx; height:50rpx; background: #000">
        我是子view
    </view>
</view>

index.js:

listClick(e) {
    //取出传输的data-params值
    //data-params定义的值将以键值对的参数存储在在view标签中,位置是e.target.dateset
    const {
        params
    } = e.target.dateset
    console.log(e, params, '-------------------->')
}

点击父view中时,console点击事件,打印出携带的item数据,能触发点击事件,但是没法携带data-数据

view的的原始事件绑定不互通性,点击到子view标签时,打印出undefined

解决措施:子view标签中也增加data-params参数,将数据再一次注入进事件中

index.wxml

//父view标签,bindtap点击事件listClick,使用data-的方式进行数值传输
<view wx:for={{ list }} wx:key="id" wx:for-item="item"
    bindtap="listClick"
    data-params="{{ item }}"
    style="width: 100%; height: 100rpx">
    //子view标签
    //子标签中也注入参数
    <view class="children" 
        data-params="{{ item }}"
        style="width: 100rpx; height:50rpx; background: #000">
        我是子view
    </view>
</view>

如此data-携带的参数边无误了