作為前端開發(fā)，我們經(jīng)常會遇到的場景，比如用戶點擊獲取驗證碼按鈕時，沒有反應(yīng)，大部分用戶都會接著點擊，這就會造成用戶收到多條驗證碼，這是因為后臺api請求比較慢，而客戶端體驗又做得不到位，導(dǎo)致用戶以為沒點擊到或者是頁面假死，在上次請求還沒處理完，就再次點擊按鈕。這對于我們開發(fā)來說，這是bug。
網(wǎng)站建設(shè)哪家好，找成都創(chuàng)新互聯(lián)！專注于網(wǎng)頁設(shè)計、網(wǎng)站建設(shè)、微信開發(fā)、小程序制作、集團企業(yè)網(wǎng)站建設(shè)等服務(wù)項目。為回饋新老客戶創(chuàng)新互聯(lián)還提供了吳忠免費建站歡迎大家使用！
如何解決或避免這個問題呢？一般來說有兩種情況。
1、點擊事件是執(zhí)行網(wǎng)絡(luò)請求（提交評論，驗證碼，支付）
這種情況下可以在請求執(zhí)行之前顯示一個模式的加載框，請求完成后再關(guān)閉加載框。
由于小程序在1.1.0版本基礎(chǔ)庫才支持wx.showLoading，因此需要對低版本做兼容處理，代碼如下：
重慶分公司
重慶分公司
function showLoading(message) {
if (wx.showLoading) {
// 基礎(chǔ)庫 1.1.0 微信6.5.6版本開始支持，低版本需做兼容處理
wx.showLoading({
title: message,
mask: true
});
} else {
// 低版本采用Toast兼容處理并將時間設(shè)為20秒以免自動消失
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，然后在使用時直接調(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、點擊事件是頁面跳轉(zhuǎn)
當(dāng)點擊事件需要頁面跳轉(zhuǎn)時，不太適合顯示加載框，但小程序的頁面跳轉(zhuǎn)并不是很快，如果不作處理又會導(dǎo)致用戶反復(fù)點擊打開多個頁面，這里可以使用限制按鈕或控件的點擊間隔的方式處理，同樣可以將這個方法放到公共的代碼里面比如util，然后在使用時直接調(diào)用即可。
function buttonClicked(self) {
self.setData({
buttonClicked: true
})
setTimeout(function () {
self.setData({
buttonClicked: false
})
}, 500)
}
首先需要在頁面對應(yīng)的js文件里面增加一個buttonClicked數(shù)據(jù)對象，然后在點擊事件里面調(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的點擊控件中通過buttonClicked判斷是否可以點擊，可以用bindtap也可以用disabled
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。
