小程序如何避免屢次點擊，重複觸發事件

小程序如何避免屢次點擊，重複觸發事件 2018年09月10日 09:51:49 honey緣木魚 閱讀數：7759 標籤： 重複點擊 更多 我的分類： 小程序 做爲前端開發，咱們常常會遇到的場景，好比用戶點擊獲取驗證碼按鈕時，沒有反應，大部分用戶都會接着點擊，這就會形成用戶收到多條驗證碼，這是由於後臺api請求比較慢，而客戶端體驗又作得不到位，致使用戶覺得沒點擊到或者是頁面假死，在上次請求還沒處理完，就再次點擊按鈕。這對於咱們開發來講，這是bug。

如何解決或避免這個問題呢？通常來講有兩種狀況。

一、點擊事件是執行網絡請求（提交評論，驗證碼，支付） 這種狀況下能夠在請求執行以前顯示一個模式的加載框，請求完成後再關閉加載框。 ，因爲小程序在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() ... } }) } 二、點擊事件是頁面跳轉 當點擊事件須要頁面跳轉時，不太適合顯示加載框，但小程序的頁面跳轉並非很快，若是不做處理又會致使用戶反覆點擊打開多個頁面，這裏可使用限制按鈕或控件的點擊間隔的方式處理，一樣能夠將這個方法放到公共的代碼裏面好比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