原生微信小程序事件传参 - bindtap + data-*（包含多参数传参）- 附完整示例

微信小程序：是一种全新的连接用户与服务的方式，它可以在微信内被便捷地获取和传播，同时具有出色的使用体验。

目录

效果

一、介绍

1、官方文档：微信开放文档

二、UI - Vant

1、官方文档：Vant Weapp - 轻量、可靠的小程序 UI 组件库

三、使用步骤

1、创建按钮

2、设置按钮父节点样式

3、创建变量

4、显示参数

5、设置参数文本样式

6、按钮绑定事件并传参

7、动态显示事件参数

8、区分currentTarget 与 target

四、完整示例

example.wxml

example.css

example.ts

 欢迎扫描下方二维码关注VX公众号

---

效果

一、介绍

1、官方文档：微信开放文档

微信开放文档微信开发者平台文档https://developers.weixin.qq.com/miniprogram/dev/framework/

二、UI - Vant

1、官方文档：Vant Weapp - 轻量、可靠的小程序 UI 组件库

Vant Weapp - 轻量、可靠的小程序 UI 组件库轻量、可靠的小程序 UI 组件库https://vant-ui.github.io/vant-weapp/#/home

注：安装 + 使用等配置的链接 - Vant Weapp - 轻量、可靠的小程序 UI 组件库

三、使用步骤

1、创建按钮

<view class="button-wrap">
  <van-button type="primary" size="large">类型A</van-button>
</view>
<view class="button-wrap">
  <van-button type="info" size="large">类型B</van-button>
</view>

2、设置按钮父节点样式

.button-wrap {
  margin: 30rpx 0;
}

3、创建变量

data: {
  id: '',
  type: '',
},

4、显示参数

<view>
  id: <text class="text-color" >{{id}}</text>
</view>
<view>
  type: <text class="text-color">{{type}}</text>
</view>

5、设置参数文本样式

.text-color {
  color: #FF976A;
}

6、按钮绑定事件并传参

<view class="button-wrap">
  <van-button data-id="A01" data-type="A" bindtap="chooseType" type="primary" size="large">类型A</van-button>
</view>
<view class="button-wrap">
  <van-button data-id="B01" data-type="B" bindtap="chooseType" type="info" size="large">类型B</van-button>
</view>

注：官方文档

事件 | 微信开放文档

事件 | 微信开放文档微信开发者平台文档https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/event.html

7、动态显示事件参数

chooseType(e: { currentTarget: { dataset: { id: any; type: any; }; }; }) {
  console.log('e',e);
  const { id, type } = e.currentTarget.dataset;
  this.setData({
    id,
    type
  })
},

8、区分currentTarget 与 target

currentTarget：事件绑定者，也就是，哪个组件绑定了当前事件处理函数。

target：事件触发者，也就是，哪个组件触发了当前事件处理函数。

根据场景选择是使用currentTarget，还是target

四、完整示例

example.wxml

<view class="button-wrap">
  <van-button data-id="A01" data-type="A" bindtap="chooseType" type="primary" size="large">类型A</van-button>
</view>
<view class="button-wrap">
  <van-button data-id="B01" data-type="B" bindtap="chooseType" type="info" size="large">类型B</van-button>
</view>

<view>
  id: <text class="text-color" >{{id}}</text>
</view>
<view>
  type: <text class="text-color">{{type}}</text>
</view>

example.css

.button-wrap {
  margin: 30rpx 0;
}

.text-color {
  color: #FF976A;
}

example.ts

Page({

  /**
   * 页面的初始数据
   */
  data: {
    id: '',
    type: '',
  },

  /**
   * bindtap事件
   */
  chooseType(e: { currentTarget: { dataset: { id: any; type: any; }; }; }) {
    console.log('e',e);
    const { id, type } = e.currentTarget.dataset;
    this.setData({
      id,
      type
    })
  },
})

注：chooseType方法与onLoad生命周期函数同级

 欢迎扫描下方二维码关注VX公众号