微信小程序：事件传参

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

小程序绑定事件，默认双引号内的都是事件名称，所以这时我们要想在微信小程序实现事件传参的话，可以使用 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 来使用传递过来的参数了。

实例：

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

微信小程序：事件传参相关推荐

微信小程序事件传参
微信小程序事件传参 wxml部分 js 部分 wxml部分 1.先绑定事件 2.在该元素上写上属性 data-index 3.参数值即为要传参数 <text catchtap="de ...
微信小程序事件传参以及循环
微信的循环和传参 wx:for="{{ imageText }}" 循环体 wx:for-item="item" 指定微信的每一项 wx:for-index=& ...
微信小程序函数传参以及获取调用
最近在做微信小程序,发现小程序的页面函数传参和web端不一样,在此做个记录: 1.web端函数传参是这样的 <Buttontype="primary"className=&q ...
小程序 | 小程序中常用的事件 + 事件对象的属性列表 +小程序事件传参 + 小程序全局配置 + 小程序页面配置 + 小程序发起网络数据请求
文章目录一.WXML 模板语法数据绑定事件绑定 ⭐小程序中常用的事件 ⭐事件对象的属性列表 target 和 currentTarget 的区别 bindtap 的语法格式在事件处理函数中为 ...
微信小程序Url传参
微信小程序的跳转分五种 1.wx.navigateTo:保留当前页面,跳转到应用内的某个页面.但是不能跳到 tabbar 页面,小程序中页面栈最多十层.(可带参) 2.wx.redirectTo:关闭 ...
微信小程序路径传参汉字乱码问题
问题描述操作步骤 1.微信小程序页面跳转的时候进行路由传参,value含有汉字.并且跳转进入的页面中使用到了这个value2.点击右上角胶囊分享3.从分享的链接中点击进入页面,在传入value汉字使 ...
微信小程序页面传参（url）参数过长报错解决办法
在开发中,如果希望将一个对象从一个页面传到另一个页面时,大家可能都会知道用JSON.stringify()的方式,把对象转成JSON字符串再传值,但是当我们的这个对象字符串数值过长的时候就会出现报错, ...
微信小程序--页面传参
场景: A页面字段---传递到-->B页面 A页面wxml: wx:for----习惯用<block> 设置所点击的值----data-xxx 获取所点击的值---e.current ...
微信小程序bindtap传参
微信小程序上传文件组件
微信小程序上传文件一.说明该拍照组件带有微信授权相机功能,会结合后端接口,将上传的图片以数组集合的形式传值给父级页面. 注意:组件适用于,单独上传图片,不携带参数,结合后端接口返回路径之后,再调用 ...

微信小程序：事件传参

微信小程序：事件传参相关推荐

最新文章

热门文章