小程序点击事件传参

该博客主要介绍微信小程序点击事件传参中 data- 的用法。可直接写 data-index=“1” 进行数据绑定,利用 bindtap 点击事件执行函数获取参数信息。强调 data- 后命名及获取时需对应,还给出代码实例直观展示用法。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

小程序点击事件传参

data- 的用法

微信小程序可以通过直接写 data-index=“1” 进行数据的绑定 ,利用 bindtap 点击事件执行函数从而获取到参数信息。

<view bindtap="triggers" data-idType="{{item.id}}">按钮</view>
注意

data- 是固定的写法,- 后面可以取任意的名字,但是需要强调的是在获取的时候要写相对应的名字,例如:data-index = "{{item.id}}" ,获取时就是 e.target.dataset.index 。取不到就使用e.currentTarget.dataset

下面通过一个简单的代码小实例带大家更直观的了解 data- 的用法。

wxml文件

<!-- 按钮触发事件 -->
<view 
 wx:for="{{list}}" 
 bindtap="triggers" 
 data-idType="{{item.id}}">点击我</view>

js文件

Page({
    data: {},
    //点击事件
    triggers(e) {
        console.log(e.target.dataset.idtype); 
    },
})

翻译自:

微信小程序通过点击事件传参(data-)

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值