快捷導(dǎo)航

詳解小程序如何避免多次點(diǎn)擊，重復(fù)觸發(fā)事件

更新時間：2019年04月08日 14:11:16 作者：honey緣木魚

這篇文章主要介紹了詳解小程序如何避免多次點(diǎn)擊，重復(fù)觸發(fā)事件，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

作為前端開發(fā)，我們經(jīng)常會遇到的場景，比如用戶點(diǎn)擊獲取驗證碼按鈕時，沒有反應(yīng)，大部分用戶都會接著點(diǎn)擊，這就會造成用戶收到多條驗證碼，這是因為后臺api請求比較慢，而客戶端體驗又做得不到位，導(dǎo)致用戶以為沒點(diǎn)擊到或者是頁面假死，在上次請求還沒處理完，就再次點(diǎn)擊按鈕。這對于我們開發(fā)來說，這是bug。

如何解決或避免這個問題呢？一般來說有兩種情況。

1、點(diǎn)擊事件是執(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、點(diǎn)擊事件是頁面跳轉(zhuǎn)

當(dāng)點(diǎn)擊事件需要頁面跳轉(zhuǎn)時，不太適合顯示加載框，但小程序的頁面跳轉(zhuǎn)并不是很快，如果不作處理又會導(dǎo)致用戶反復(fù)點(diǎn)擊打開多個頁面，這里可以使用限制按鈕或控件的點(diǎn)擊間隔的方式處理，同樣可以將這個方法放到公共的代碼里面比如util，然后在使用時直接調(diào)用即可。

function buttonClicked(self) {
 self.setData({
  buttonClicked: true
 })
 setTimeout(function () {
  self.setData({
   buttonClicked: false
  })
 }, 500)
}

首先需要在頁面對應(yīng)的js文件里面增加一個buttonClicked數(shù)據(jù)對象，然后在點(diǎn)擊事件里面調(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的點(diǎn)擊控件中通過buttonClicked判斷是否可以點(diǎn)擊，可以用bindtap也可以用disabled

<view bindtap="{{!buttonClicked?'click':''}}" data-id="{{id}}" />
<button bindtap="{{!buttonClicked?'click':''}}" data-id="{{id}}" />
<button bindtap="click" disabled="buttonClicked" data-id="{{id}}" />

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: