小程序开发-bindtap事件传参

本文介绍了在小程序中如何正确使用bindtap事件进行参数传递,通过实例展示了如何为不同的元素绑定事件并传递特定参数,避免了冗余代码的编写。

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

初接触小程序时以为bindtap事件是不能传参的,因为尝试用vue的事件传参方式 结果不行,让我也惶恐了一阵,这要是不能传参后面那么多for循环该怎么办

<view class='show'>
    <text data-no='1' bindtap='toggle' class="{{active == 1?'active':''}}">交通运输</text>
    <text data-no='2' bindtap='toggle' class="{{active == 2?'active':''}}">商业服务</text>
    <text data-no='3' bindtap='toggle' class="{{active == 3?'active':''}}">医疗卫生</text>
    <text data-no='4' bindtap='toggle' class="{{active == 4?'active':''}}">水利桥梁</text>
    <text data-no='5' bindtap='toggle' class="{{active == 5?'active':''}}">农林牧渔</text>
    <text data-no='6' bindtap='toggle' class="{{active == 6?'active':''}}">能源化工</text>
    <text data-no='7' bindtap='toggle' class="{{active == 7?'active':''}}">出版印刷</text>
    <text data-no='8' bindtap='toggle' class="{{active == 8?'active':''}}">原材料</text>
  </view>

事件定义

Page({
  data: {
    active: 1
  },
  toggle: function (e) {
    var a = e.currentTarget.dataset.no
    this.setData({
      active: a
    })
  }
})


之前为了实现功能写了一堆骚代码,能传参就写一个函数,不能传参那就写16遍函数,代码不认直视,既然能传参那就好办了,

小程序和vue很像,但还是有区别的

### 微信小程序中绑定点击事件并传递参数的方法 在微信小程序中,为了实现点击事件的绑定与参数传递,通常采用`bindtap`属性来指定事件处理函数,并通过`data-xxx`自定义属性向该函数传递所需的数据。具体来说,在WXML文件内的组件上设置这些属性之后,可以在对应的JS文件里编写相应的事件处理器,从中提取出所需的参数。 #### WXML部分 ```html <view bindtap="handleTap" data-id="{{itemId}}" class="item">Item</view> ``` 这里展示了一个简单的视图元素,它绑定了名为`handleTap`的点击事件监听器,并且设置了`data-id`作为待传输的信息之一[^1]。 #### JS部分 ```javascript Page({ handleTap(event){ const itemId = event.currentTarget.dataset.id; console.log('Clicked item ID:', itemId); } }) ``` 上述JavaScript代码片段展示了如何获取由模板层传送过来的数据项ID。当用户触发关联的操作时,系统自动创建一个包含了交互细节的对象——即这里的`event`变量;而目标节点上的所有`dataset`成员则可通过访问此对象下的`currentTarget`属性获得[^2]。 值得注意的是,不同于某些框架允许直接在标记内声明额外参数的做法,微信小程序并不支持这种方式。因此,任何想要发送给回调函数之外的东西都应当借助于`data-*`前缀的形式附加至HTML标签之上[^3]。 另外,尽管存在一定的相似之处,但微信小程序的设计理念和技术栈区别于Vue.js等前端库/框架,所以在实际编码过程中要注意区分两者的差异性,以免造成不必要的混乱[^4]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值