小程序在渲染或者在操作请求时,如果响应很慢,会导致用户多次点击或者重复点击。另外也可能有用户多次连续点击请求,造成不是我们想要的结果。因此,需要设置禁止用户多次重复点击。在执行请求时,禁止多次点击或者重复点击,放在工具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();
}
}
在页面js:
submit:function(){
util.showLoading("数据请求中...");
wx.request({
url:url,
data:data,
success:(res)=>{
util.hideLoading();
},
fail:()=>{
util.hideLoading();
}
})
}
wxml:
<view bindtap="submit"></view>
在页面跳转,禁止多次或者重复点击:
/**
*
*/
function isClicked(self) {
self.setData({
isClicked: true
})
setTimeout(function () {
self.setData({
isClicked: false
})
}, 500)
}
在对应页面中设置isClicked数据对象,
js:
Page({
data:{
isClicked:false
},
click:function(){
util.isClicked(this);
}
})
wxml:
<view bindtap="{{!isClicked?'click':''}}"></view>