微信小程序 按钮点击事件

微信小程序中的点击事件跟vue中的不一样,不是使用@click,而是使用bind:tap

wxml中定义按钮组件

html 复制代码
<button bind:tap="onClick">点击</button>

js中定义点击处理事件

javascript 复制代码
// index.js
Page({
  data: {
    message: '尚未点击'
  },
  onClick() {
    console.log('按钮被点击了');

    this.setData({
      message: '按钮已被点击!'
    });
  }
});

点击传参给事件处理

通过data-*属性传参(推荐)

javascript 复制代码
<button bind:tap="addScore" data-type="homeTeam" data-score="3" class="btn score-3">+3</button>

js中获取参数

javascript 复制代码
  addScore(e) {
    const dataset = e.currentTarget.dataset
    const {
      score,
      type,
    } = dataset
    if (type === 'homeTeam') {
      this.setData({
        'homeTeam.score': Number(this.data.homeTeam.score) + Number(score)
      })
    }
  },
  • this.setData()用于更新数据并触发页面更新。
相关推荐
郭邯5 小时前
小程序中自定义组件的样式隔离
微信小程序
每天开心7 小时前
噜噜旅游App(4)——构建旅游智能客服模块,实现AI聊天
前端·微信小程序·前端框架
老华带你飞13 小时前
口腔助手|口腔挂号预约小程序|基于微信小程序的口腔门诊预约系统的设计与实现(源码+数据库+文档)
java·数据库·微信小程序·小程序·论文·毕设·口腔小程序
尸僵打怪兽13 小时前
HBuilder X打包发布微信小程序
微信小程序·小程序·打包·hbuilder x
说私域1 天前
公域流量向私域流量转化策略研究——基于开源AI智能客服、AI智能名片与S2B2C商城小程序的融合应用
人工智能·小程序
半生过往1 天前
微信小程序文件下载与预览功能实现详解
微信小程序·小程序·notepad++·压缩包下载解压
源码_V_saaskw1 天前
JAVA图文短视频交友+自营商城系统源码支持小程序+Android+IOS+H5
java·微信小程序·小程序·uni-app·音视频·交友
weixin_lynhgworld1 天前
淘宝扭蛋机小程序系统开发:重塑电商互动模式
大数据·小程序
996幸存者1 天前
uni-app区域选择、支持静态、动态数据
微信小程序·uni-app
ᥬ 小月亮1 天前
Uniapp编写微信小程序,绘制动态圆环进度条
微信小程序·小程序·uni-app