微信小程序按钮点击事件示例代码
更新时间：2025年06月19日 09:31:31 作者：干到60岁退休的码农
在微信小程序中,实现按钮点击跳转页面是一个常见的功能需求,这篇文章主要介绍了微信小程序按钮点击事件的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下
微信小程序中的点击事件跟vue中的不一样，不是使用@click，而是使用bind:tap
wxml中定义按钮组件
<button bind:tap="onClick">点击</button>
js中定义点击处理事件
// index.js
Page({
data: {
message: '尚未点击'
},
onClick() {
console.log('按钮被点击了');
this.setData({
message: '按钮已被点击！'
});
}
});
点击传参给事件处理
通过data-*属性传参(推荐)
<button bind:tap="addScore" data-type="homeTeam" data-score="3" class="btn score-3">+3</button>
js中获取参数
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()用于更新数据并触发页面更新。
总结
到此这篇关于微信小程序按钮点击事件的文章就介绍到这了,更多相关微信小程序按钮点击事件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
用于节点操作的API，颠覆原生操作HTML DOM节点的API
敏捷开发是一种以人为核心、迭代、循序渐进的开发方法。在敏捷开发中，软件项目的构建被切分成多个子项目，各个子项目的成果都经过测试，具备集成和可运行的特征。2010-12-12
这篇文章主要给大家介绍了关于用js生成a标签下载文件并携带请求头的两种方法, 这种下载文件方式在前端项目中非常常见,文中通过代码介绍的非常详细,需要的朋友可以参考下2024-03-03
这篇文章主要介绍了let与var声明变量区别，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-05-05
这篇文章主要给大家介绍了关于JavaScript中垃圾回收与内存泄漏的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用JavaScript具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧2019-05-05
最近领导安排做一个小程序之做头部做导航分类效果，下面小编给大家分享实现代码，需要的朋友参考下吧2017-10-10
最近羊了个羊火的不得了，这篇文章主要为大家介绍了如何利用JS实现个网页版羊了个羊游戏，有需要的朋友可以借鉴参考下，希望能够有所帮助2022-09-09
两行代码轻松搞定JavaScript日期验证,通过实例化Date对象来生成一个合法的日期，验证日期是否合法，感兴趣的小伙伴们可以参考一下2016-08-08
这篇文章主要介绍了JS window对象简单操作,结合完整实例形式分析了JavaScript Window对象各种常见提示框、弹出窗口及时间相关操作技巧,需要的朋友可以参考下2020-01-01
最近用js写了一个计算器的页面。基本上使用到了，ul li的几点用法。用来布局，并且创造出了很不错的鼠标悬停效果。2010-04-04
这篇文章主要介绍了随机显示经典句子或诗歌的javascript脚本的相关资料,需要的朋友可以参考下2007-08-08
最新评论