干掉微信小程序-避免多次点击,重复触发事件
问题描述
开发小程序时,或者说是在做前端的时候,我们经常会遇到当用户点击某个按钮时,没有得到反馈的话,大部分用户都会接着点击,这就会造成前端接收到多次请求的响应。
这主要是因为后端api请求需要时间,导致用户以为没点击到或者是页面假死,在上次请求还没处理完,就再次点击按钮。
所以,接下来说说,在微信小程序中避免多次点击,重复触发事件的两种思路。
解决方法一:
使用 wx.showLoading 在请求执行之前显示一个加载框,请求完成后再关闭加载框。
js代码
showLoading:function(message) {
if (wx.showLoading) {
// 基础库 1.1.0 微信6.5.6版本开始支持,低版本需做兼容处理
wx.showLoading({
title: message,
mask: true
});
} else {
// 低版本采用Toast兼容处理并将时间设为20秒以免自动消失
wx.showToast({
title: message,
icon: 'loading',
mask: true,
duration: 20000
});
}
}
hideLoading:function() {
if (wx.hideLoading) {
// 基础库 1.1.0 微信6.5.6版本开始支持,低版本需做兼容处理
wx.hideLoading();
} else {
wx.hideToast();
}
}
解决方法二:
使用限制按钮或控件的点击时间间隔的方式处理。
js代码
Page({
data: {
buttonClicked: false
},
click: function (e) {
this.buttonClicked(this);
},
})
... ...
buttonClicked:function (_this) {
_this.setData({
buttonClicked: true
})
setTimeout(function () {
_this.setData({
buttonClicked: false
})
}, 500)
}
wxml代码
<view bindtap="{{!buttonClicked?'click':''}}"" />
<button bindtap="{{!buttonClicked?'click':''}}" />
<button bindtap="click" disabled="buttonClicked" />
原文地址:https://www.cnblogs.com/lskreno/p/12248575.html
时间: 2024-10-28 10:48:07