- 小程序
在微信小程序中，解决重复点击的问题通常可以通过两种方式来实现：一是使用按钮的 disable 属性来禁用按钮，二是在点击事件处理函数中设置一个状态来控制是否允许再次触发。
1. 使用按钮的 disable 属性
在微信小程序中，可以通过设置按钮的 disable 属性来控制按钮的可点击状态，从而避免用户重复点击。
点击我
// pages/index/index.js
Page({
data: {
buttonDisabled: false // 初始状态按钮可点击
},
handleButtonClick: function () {
// 禁用按钮
this.setData({
buttonDisabled: true
});
// 模拟异步操作
setTimeout(() => {
// 处理完业务逻辑后，恢复按钮可点击状态
this.setData({
buttonDisabled: false
});
}, 2000); // 2秒后恢复按钮可点击状态，可以根据实际情况调整
}
});2. 使用状态控制防重复点击
另一种方法是在点击事件处理函数中设置一个状态来控制是否允许再次触发点击事件。
// pages/index/index.js
Page({
data: {
buttonClicked: false // 初始状态未点击
},
handleButtonClick: function () {
// 如果按钮已经被点击过，则直接返回，不执行后续操作
if (this.data.buttonClicked) {
return;
}
// 标记按钮已点击
this.setData({
buttonClicked: true
});
// 模拟异步操作
setTimeout(() => {
// 处理完业务逻辑后，恢复按钮状态
this.setData({
buttonClicked: false
});
}, 2000); // 2秒后恢复按钮状态，可以根据实际情况调整
}
});注意事项：
使用 disable 属性时，需要在需要禁用按钮的时候动态设置该属性。
使用状态控制防重复点击时，需要在异步操作结束后恢复按钮状态，以确保用户可以再次点击。
