當(dāng)用戶點(diǎn)擊按鈕或控件時(shí)姨俩，如果響應(yīng)比較慢柬祠，往往會(huì)重復(fù)點(diǎn)擊北戏，另外也會(huì)存在用戶故意反復(fù)快速點(diǎn)擊的情況，這種時(shí)候就會(huì)多次觸發(fā)點(diǎn)擊事件造成非期望的結(jié)果漫蛔。如何解決或避免這個(gè)問題呢嗜愈？一般來說有兩種情況。
1莽龟、點(diǎn)擊事件是執(zhí)行請(qǐng)求
這種情況下可以在請(qǐng)求執(zhí)行之前顯示一個(gè)模式的加載框蠕嫁，請(qǐng)求完成后再關(guān)閉加載框，由于小程序在1.1.0版本基礎(chǔ)庫才支持wx.showLoading毯盈，因此需要對(duì)低版本做兼容處理剃毒，代碼如下：
function showLoading(message) {
if (wx.showLoading) {
// 基礎(chǔ)庫 1.1.0 微信6.5.6版本開始支持，低版本需做兼容處理
wx.showLoading({
title: message,
mask: true
});
} else {
// 低版本采用Toast兼容處理并將時(shí)間設(shè)為20秒以免自動(dòng)消失
wx.showToast({
title: message,
icon: 'loading',
mask: true,
duration: 20000
});
}
}
function hideLoading() {
if (wx.hideLoading) {
// 基礎(chǔ)庫 1.1.0 微信6.5.6版本開始支持搂赋，低版本需做兼容處理
wx.hideLoading();
} else {
wx.hideToast();
}
}
我們可以將顯示加載框和關(guān)閉加載框的代碼放在公共的代碼里面比如util赘阀，然后在使用時(shí)直接調(diào)用即可。
function request() {
util.showLoading('加載中...');
wx.request({
url: app.globalData.host + 'xxx',
data: {...},
method: 'GET',
success: function (res) {
util.hideLoading()
...
},
fail: function (res) {
util.hideLoading()
...
}
})
}
2脑奠、點(diǎn)擊事件是頁面跳轉(zhuǎn)
當(dāng)點(diǎn)擊事件是頁面跳轉(zhuǎn)時(shí)基公，不太適合顯示加載框，但小程序的頁面跳轉(zhuǎn)并不是很快宋欺，如果不作處理又會(huì)導(dǎo)致用戶反復(fù)點(diǎn)擊打開多個(gè)頁面轰豆，這里可以使用限制按鈕或控件的點(diǎn)擊間隔的方式處理胰伍，同樣可以將這個(gè)方法放到公共的代碼里面比如util，然后在使用時(shí)直接調(diào)用即可酸休。
function buttonClicked(self) {
self.setData({
buttonClicked: true
})
setTimeout(function () {
self.setData({
buttonClicked: false
})
}, 500)
}
首先需要在頁面對(duì)應(yīng)的js文件里面增加一個(gè)buttonClicked數(shù)據(jù)對(duì)象骂租，然后在點(diǎn)擊事件里面調(diào)用上述方法。
Page({
data: {
buttonClicked: false
},
click: function (e) {
util.buttonClicked(this);
var id = e.currentTarget.dataset.id;
wx.navigateTo({
url: '../detail/detail?id=' + id
})
},
})
另外斑司，在wxml的點(diǎn)擊控件中通過buttonClicked判斷是否可以點(diǎn)擊渗饮，可以用bindtap也可以用disabled
<view bindtap="{{!buttonClicked?'click':''}}" data-id="{{id}}" />
<button bindtap="{{!buttonClicked?'click':''}}" data-id="{{id}}" />
<button bindtap="click" disabled="buttonClicked" data-id="{{id}}" />
