微信小程序 防止重复点击
2022-03-24 本文已影响0人
AAA_si
微信小程序 防止重复点击或请求 出现问题
共计两种方法 个人推荐方法2
方法1 全局设置方法 在需要的页面单独控制
app.js
globalData: {
PageActive: true
},
// 防止重复点击事件
preventActive (fn) {
const self = this
if (this.globalData.PageActive) {
this.globalData.PageActive = false
if (fn) fn()
setTimeout(() => {
self.globalData.PageActive = true
}, 1500); //设置该时间内重复触发只执行第一次,单位ms,按实际设置
} else {
console.log('重复点击或触发')
}
}
index.js
// getApp() 是全局方法
getBtn:function(){
getApp().preventActive(()=>{
ajax('/pages/index', {
data:{
id:this.data.id
},
}, res => {
if(res.code == 0){
console.log(res,'1500秒后再次点击才生效')
}
})
})
}
方法2
1.执行请求时使用wx.showLoading
util.js文件
function showLoading(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
});
}
}
function hideLoading() {
if (wx.hideLoading) {
// 基础库 1.1.0 微信6.5.6版本开始支持,低版本需做兼容处理
wx.hideLoading();
} else {
wx.hideToast();
}
}
index.js文件(需要的js文件)
function request() {
util.showLoading('加载中...');
ajax('/pages/index', {
data:{
id:this.data.id
},
}, res => {
util.hideLoading()
if(res.code == 0){
console.log(res,'返回值')
}
})
}
2.页面跳转时,由于小程序的页面跳转并不是很快,可以选择用加载框,也可以限制按钮或控件的点击间隔的方式处理(更合适)
util.js文件
function buttonClicked(self) {
self.setData({
buttonClicked: true
})
setTimeout(function () {
self.setData({
buttonClicked: false
})
}, 500)
}
index.js
Page({
data: {
buttonClicked: false
},
click: function (e) {
util.buttonClicked(this);
var id = e.currentTarget.dataset.id;
wx.navigateTo({
url: '../detail/detail?id=' + id
})
},
})
或
直接wxml中判断,不需要在index.js中操作
index.wxml
<view bindtap="{{!buttonClicked?'click':''}}" data-id="{{id}}" />
<button bindtap="{{!buttonClicked?'click':''}}" data-id="{{id}}" />
<button bindtap="click" disabled="buttonClicked" data-id="{{id}}" />