微信小程序通过点击事件传参（data-）

前言

大家都知道在 vue 中，我们可以直接在点击事件中放入传递的参数进行传参；然而微信小程序中并不适用这样的写法，但是微信小程序可以通过自定义属性从而绑定参数使用。

data- 的用法

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

<view bindtap="triggers" data-idType="1">点击我</view>

注意：

data- 是固定的写法，- 后面可以取任意的名字，但是需要强调的是在获取的时候要写相对应的名字，例如：data-index = "1" ，获取时就是 e.target.dataset.index 。

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

wxml文件

<!-- 按钮触发事件 -->
<view bindtap="triggers" data-idType="1">点击我</view>

js文件

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

如下图：

微信小程序通过点击事件传参（data-）相关推荐

微信小程序之父子间组件传参
1.创建组件打开微信开发者工具,创建组件,会生成四个文件:wxml,wxss,js,json 在wxml中: <view>我是组件A</view> 在js中: Compone ...
微信小程序组件与页面的传参、方法调用（二）
微信小程序组件与页面的传参.方法调用使用小程序组件时经常不会只用到静态页面显示,需要一定的交互.这时候就需要知道这么传参与方法调用的了首先先放官方的文档,介绍的还是比较清楚详细,有能力的同学请直 ...
vue 传参微信_小猿圈web前端之微信小程序页面间跳转传参方式总结
原标题:小猿圈web前端之微信小程序页面间跳转传参方式总结最近小程序发展的越来越快,很多大公司也在打造自己的小程序平台以及购物小程序等等,今天小猿圈web前端讲师就总结了关于微信小程序的知识点,首先 ...
按钮点击_如何设置微信小程序按钮点击事件？
当我们需要点击按钮实现一个操作时,我们应该怎么设置?这里给大家介绍两种方法: 方法一:使用小程序模板,无需懂技术. 这种方法比较简单,你只需要选一个比较简单的小程序模板,比如「上线了」sxl.cn,在 ...
微信小程序——绑定点击事件
微信小程序出来了那么长时间了,之前一直准备升学和毕业设计(过段时间我要写一写我的毕业设计),最近马上毕业了,终于有时间来研究一下了,先从最简单的点击事件开始吧! 首先我们在test.wxml中加入以下 ...
微信小程序跳转tabBar页面传参
微信小程序底部tabBar一般通过wx.switchTab进行跳转,但该api无法传参,如何解决传参问题? 网上查了一下,一般都是通过app.globalData全局变量进行传参的,但这种方法在需要配 ...
【微信小程序】点击事件bindtap如何传参
错误写法 // wxml页面 <view class="card_box" bindtap="toPage('12')"> </view> ...
微信小程序开发-点击事件，获取元素id
1.点击事件,获取元素id,页面传值参数传递: 小程序里的点击触发事件.如何获取当前元素的id.如何吧值传递到下一个页面例: <view class="kindleft"& ...
uniapp 微信小程序阻止点击事件click冒泡
使用uniapp开发小程序的时候,@click.stop来做事件冒泡没有作用. 需要把@click.stop改成@tap.stop就可以实现了.
【微信小程序】给绑定事件传参数
前言调试基础库 2.12.0 开发者工具 1.03.2008270 给绑定事件传参数使用公共属性data-*给绑定事件传参数使用方式声明事件: Page({tapName: function( ...

微信小程序通过点击事件传参（data-）

前言

data- 的用法

微信小程序通过点击事件传参（data-）相关推荐

最新文章

热门文章