作為前端開發，我們經常會遇到的場景，比如用戶點擊獲取驗證碼按鈕時，沒有反應，大部分用戶都會接著點擊，這就會造成用戶收到多條驗證碼，這是因為后臺api請求比較慢，而客戶端體驗又做得不到位，導致用戶以為沒點擊到或者是頁面假死，在上次請求還沒處理完，就再次點擊按鈕。這對于我們開發來說，這是bug。
如何解決或避免這個問題呢？一般來說有兩種情況。
1、點擊事件是執行網絡請求（提交評論，驗證碼，支付）
這種情況下可以在請求執行之前顯示一個模式的加載框，請求完成后再關閉加載框。
由于小程序在1.1.0版本基礎庫才支持wx.showLoading，因此需要對低版本做兼容處理，代碼如下：
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(); }}我們可以將顯示加載框和關閉加載框的代碼放在公共的代碼里面比如util，然后在使用時直接調用即可。
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、點擊事件是頁面跳轉
當點擊事件需要頁面跳轉時，不太適合顯示加載框，但小程序的頁面跳轉并不是很快，如果不作處理又會導致用戶反復點擊打開多個頁面，這里可以使用限制按鈕或控件的點擊間隔的方式處理，同樣可以將這個方法放到公共的代碼里面比如util，然后在使用時直接調用即可。
function buttonClicked(self) { self.setData({ buttonClicked: true }) setTimeout(function () { self.setData({ buttonClicked: false }) }, 500)}首先需要在頁面對應的js文件里面增加一個buttonClicked數據對象，然后在點擊事件里面調用上述方法。
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
<view bindtap="{{!buttonClicked?'click':''}}" data-id="{{id}}" /><button bindtap="{{!buttonClicked?'click':''}}" data-id="{{id}}" /><button bindtap="click" disabled="buttonClicked" data-id="{{id}}" />以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持VEVB武林網。
新聞熱點
疑難解答
