微信小程序按钮点击事件示例代码
更新时间：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()用于更新数据并触发页面更新。
总结
到此这篇关于微信小程序按钮点击事件的文章就介绍到这了,更多相关微信小程序按钮点击事件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了JavaScript实现定时隐藏与显示图片的方法,可实现javascript定时关闭图片的功能,涉及javascript针对页面元素属性定时操作的相关技巧,需要的朋友可以参考下2015-08-08
这篇文章主要为大家详细介绍了js实现图片加载淡入淡出效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-04-04
这篇文章介绍了几种JS的动态效果实例，有需要的朋友可以参考一下2013-07-07
关键字搜索时有下拉字段，在使用百度时会遇到,本例讲述用js实现类似的效果2014-08-08
我们在微信小程序开发的时候,手机号的验证是经常需要操作的,那么如何验证手机号呢?这篇文章主要给大家介绍了关于微信小程序判断手机号是否合法的相关资料,需要的朋友可以参考下2021-09-09
设置透明度问题，比如图片的淡入淡出效果。下面我介绍一下在原生js和jQuery中设置透明度的相关问题和注意点2014-01-01
JS关键字变色详细很多朋友都很想实现吧接下来将执行以下几个步骤：1.替换关键字，对字体变色2.用正则，CSS背景变色;该方法可结合前台JS调用，感兴趣的朋友可以参考下，希望可以帮助到你2013-02-02
javascript函数可以用任意多个参数来调用，而不用管函数定义时指定了几个参数。因为函数是弱类型的，没有方法去声明它所期望的参数类型，并且给任何函数传递任何类型的值都是合法的2015-11-11
这篇文章主要介绍了js淡入淡出焦点图幻灯片效果，图片轮播效果特别适合做产品展示，自己可以更改图片，标题，感兴趣的小伙伴可以参考下。2015-09-09
这篇文章主要介绍了微信小程序的引导页实现代码,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2020-06-06
最新评论