小程式如何避免多次點選，重複觸發事件 2018年09月10日 09:51:49 honey緣木魚 閱讀數：7759 標籤： 重複點選 更多 個人分類： 小程式 作為前端開發，我們經常會遇到的場景，比如使用者點選獲取驗證碼按鈕時，沒有反應，大部分使用者都會接著點選，這就會造成使用者收到多條驗證碼，這是因為後臺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