微信小程序动态添加class,事件传参

data-参数名="值" 

bind:tap="事件名称"

<view class="tab-item {{tabIndex=='1' ? 'active' : ''}}" data-tab="1" bind:tap="tabChange">点击</view>
tabChange(event){
    console.log('tabChange', event)
    let tabIndex = event.currentTarget.dataset.tab;
    this.setData({
      tabIndex
    })
  },

 

### 微信小程序中绑定点击事件并传递参数的方法 在微信小程序中,为了实现点击事件的绑定与参数传递,通常采用`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
发出的红包

打赏作者

LLL_LH

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值