微信小程序 - 绑定事件 bindtap（包括是否传入参数）

小程序绑定事件的方式有很多种，这里我只对bindtap的绑定方式进行介绍，其他的绑定方式也是差不多这样的。

1、不带参数的绑定方式

index.wxml文件中：share表示绑定的事件名称

<view class='enjoy' bindtap='share'>立即分享</view>

index.js文件中：

share(){console.log('分享。。。。')
}

2、带参数的绑定方式

index.wxml文件中：
share表示绑定的事件名称，data-id对应的是要传递过去的参数，data- 后面的名称可以自定义，在js文件中要拿到这个参数就要对应的点出data- 后面的自定义名称

<view wx:for="{{titleList}}" wx:for-index="index" wx:for-item="itemTitle" wx:key="index+itemTitle" bindtap='getLists' data-id="{{itemTitle.bid}}"><view>{{itemTitle.title}}</view><view class='line'></view>
</view>

index.js文件中：
因为wxml文件中 data- 后面的自定义名称是 id，所以在这里直接通过 e.currentTarget.dataset.id 取出来即可

getLists(e) {// 拿到对应参数 有两种方式都可以拿到对应的参数console.log('e---->', e.currentTarget.dataset.id)//或者console.log('e.target.dataset.id---->', e.target.dataset.id)
}

微信小程序 - 绑定事件 bindtap（包括是否传入参数）相关推荐

【微信小程序---绑定事件bindtap跳转】
1.所需要跳转的页面进行 bindtap="f0" 绑定所需要的地方 2.在js页面进行 f0:function(event){函数指向功能} 以上是绑定按钮跳转事件分航线下方是 ...
微信小程序-绑定事件以及bindtap和catchtap的区别
前言在微信小程序的开发过程中我们肯定会遇到时间绑定的问题,这时候我们一般都是采用bandtap或者是catchtap进行事件绑定的.那么他们两个的区别在哪里呢? 一.首先我们要先知道什么是事件微信 ...
微信小程序阻止事件冒泡
在vue中阻止事件冒泡的方法使用的event.stopPropagation(); 但微信小程序中事件传递的event却没有stopPropagation()这个方法解决方案:将绑定事件的bindt ...
wxml修改样式_微信小程序动态绑定事件并实现事件修改样式
微信小程序动态绑定事件并实现事件修改样式实例代码 wxml {{item.name}} js var reportTypeList = [ { name: "日报1", id: ...
微信小程序绑定客服，接收不到消息？
微信小程序绑定客服,无法接收用户消息客服文档添加客服 <button class="serviceBtn" open-type="contact"&g ...
微信小程序页面跳转如何传递对象参数
前几天一个月薪35k的兄弟,给我推了一个人工智能学习网站,看了一段时间挺有意思的.包括语音识别.机器翻译等从基础到实战都有,很详细,分享给大家.大家及时保存,说不定啥时候就没了. 微信小程序页面跳转如 ...
微信小程序点击带id参数跳转_微信小程序页面跳转方法和携带参数详解
1.页面跳转方式 (1)标签跳转 open-type的属性值对应api里的用法即wx.的用法 1 跳转到新页面 (2)wx.navigateTo 方法跳转此方法能够从跳转的页面会回到当前页面 1 w ...
微信小程序request请求后台接收不到参数问题
微信小程序request请求后台接收不到参数问题一. 小程序部分代码二. 后端三. 问题代码四. 请求头一. 小程序部分代码发一个普通的request请求 wx.request({url: ...
微信小程序——绑定点击事件
微信小程序出来了那么长时间了,之前一直准备升学和毕业设计(过段时间我要写一写我的毕业设计),最近马上毕业了,终于有时间来研究一下了,先从最简单的点击事件开始吧! 首先我们在test.wxml中加入以下 ...

微信小程序 - 绑定事件 bindtap（包括是否传入参数）

1、不带参数的绑定方式

2、带参数的绑定方式

微信小程序 - 绑定事件 bindtap（包括是否传入参数）相关推荐

最新文章

热门文章