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

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

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

作為前端開(kāi)發(fā)，我們經(jīng)常會(huì)遇到的場(chǎng)景，比如用戶點(diǎn)擊獲取驗(yàn)證碼按鈕時(shí)，沒(méi)有反應(yīng)，大部分用戶都會(huì)接著點(diǎn)擊，這就會(huì)造成用戶收到多條驗(yàn)證碼，這是因?yàn)楹笈_(tái)api請(qǐng)求比較慢，而客戶端體驗(yàn)又做得不到位，導(dǎo)致用戶以為沒(méi)點(diǎn)擊到或者是頁(yè)面假死，在上次請(qǐng)求還沒(méi)處理完，就再次點(diǎn)擊按鈕。這對(duì)于我們開(kāi)發(fā)來(lái)說(shuō)，這是bug。

如何解決或避免這個(gè)問(wèn)題呢？一般來(lái)說(shuō)有兩種情況。

1、點(diǎn)擊事件是執(zhí)行網(wǎng)絡(luò)請(qǐng)求（提交評(píng)論，驗(yàn)證碼，支付）

這種情況下可以在請(qǐng)求執(zhí)行之前顯示一個(gè)模式的加載框，請(qǐng)求完成后再關(guān)閉加載框。

由于小程序在1.1.0版本基礎(chǔ)庫(kù)才支持wx.showLoading，因此需要對(duì)低版本做兼容處理，代碼如下：

 function showLoading(message) {
 if (wx.showLoading) {
  // 基礎(chǔ)庫(kù) 1.1.0 微信6.5.6版本開(kāi)始支持，低版本需做兼容處理
  wx.showLoading({
   title: message,
   mask: true
  });
 } else {
  // 低版本采用Toast兼容處理并將時(shí)間設(shè)為20秒以免自動(dòng)消失
  wx.showToast({
   title: message,
   icon: 'loading',
   mask: true,
   duration: 20000
  });
 }
}
 
function hideLoading() {
 if (wx.hideLoading) {
  // 基礎(chǔ)庫(kù) 1.1.0 微信6.5.6版本開(kāi)始支持，低版本需做兼容處理
  wx.hideLoading();
 } else {
  wx.hideToast();
 }
}

我們可以將顯示加載框和關(guān)閉加載框的代碼放在公共的代碼里面比如util，然后在使用時(shí)直接調(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)擊事件是頁(yè)面跳轉(zhuǎn)

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

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

首先需要在頁(yè)面對(duì)應(yīng)的js文件里面增加一個(gè)buttonClicked數(shù)據(jù)對(duì)象，然后在點(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)擊控件中通過(guò)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}}" />

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

您可能感興趣的文章: