在微信小程序日常开发中,特定场景下我们需要事件携带参数到要执行的函数中,但是又因为小程序的事件传参方式有所不同,并不能在绑定事件后,在事件名称后面加括号携带参数。

小程序绑定事件,默认双引号内的都是事件名称,所以这时我们要想在微信小程序实现事件传参的话,可以使用 data-* 自定义属性名来进行传参。

可以为组件提供 data-* 自定义属性传参,其中 * 代表的是参数的名字

比如: 

代码如下(wxml): 
<view> <view class="center">{{ num }}</view> <button bindtap="add" data-num="{
{5}}">点击加 5 </button> </view>
可以看到,代码中定义了点击事件 add,通过自定义属性 data-num 完成传参,参数是 5 ;其中 num 就是参数的名称。

那么,如何获取事件携带的参数呢?

在事件处理函数中,通过 event.target.dataset.参数名,即可获取到具体参数的值

 代码如下(js):
data: { num: 0 }, add(e) { console.log(e) this.setData({ num: this.data.num +
e.target.dataset.num }) },
打印整个事件可以看到通过自定义属性 data-num 所携带的参数 5。

 这时候就可以在方法中通过 e.target.dataset.num 来使用传递过来的参数了。

实例:

 页面是简单的数据渲染加一个点击按钮,实现通过点击按钮触发事件并携带参数,操作参数来修改数据,从而达到图片上的效果。

技术
下载桌面版
GitHub
百度网盘(提取码:draw)
Gitee
云服务器优惠
阿里云优惠券
腾讯云优惠券
华为云优惠券
站点信息
问题反馈
邮箱:ixiaoyang8@qq.com
QQ群:766591547
关注微信