微信小程式防止重複點選
阿新 • • 發佈:2018-12-29
有時候,使用者點選按鈕或控制元件時,如果響應比較慢或者網速差,往往會重複多次點選,當然也有一部分想要找茬的使用者故意反覆快速點選,導致多次觸發點選事件造成非期望的結果。為了避免這個問題,大致分這兩種解決方式
1.點選事件是執行請求
這種情況下可以在請求執行之前顯示一個模式的載入框,請求完成後再關閉載入框,由於小程式在1.1.0版本基礎庫才支援wx.showLoading,因此需要對低版本做相容處理,程式碼如下,我們可以將顯示載入框和關閉載入框的程式碼放在公共的程式碼裡面比如util,然後在使用時直接呼叫即可。
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(); } }
module.exports = {
showLoading:showLoading,
hideLoading:hideLoading
}
2、點選事件是頁面跳轉
當點選事件是頁面跳轉時,不太適合顯示載入框,但小程式的頁面跳轉並不是很快,如果不作處理又會導致使用者反覆點選開啟多個頁面,這裡可以使用限制按鈕或控制元件的點選間隔的方式處理,同樣可以將這個方法放到公共的程式碼裡面比如util,然後在使用時直接呼叫即可。
function buttonClicked(self) { self.setData({ buttonClicked: true }) setTimeout(function () { self.setData({ buttonClicked: false }) }, 500) } module.exports = { buttonClicked:buttonClicked }
首先需要在頁面對應的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 }) }, })