作為前端開(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。

網(wǎng)站建設(shè)哪家好，找成都創(chuàng)新互聯(lián)！專注于網(wǎng)頁(yè)設(shè)計(jì)、網(wǎng)站建設(shè)、微信開(kāi)發(fā)、小程序制作、集團(tuán)企業(yè)網(wǎng)站建設(shè)等服務(wù)項(xiàng)目。為回饋新老客戶創(chuàng)新互聯(lián)還提供了吳忠免費(fèi)建站歡迎大家使用！

如何解決或避免這個(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í)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。

文章題目：詳解小程序如何避免多次點(diǎn)擊，重復(fù)觸發(fā)事件
轉(zhuǎn)載來(lái)源：http://www.chinadenli.net/article8/iphdip.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供品牌網(wǎng)站制作、云服務(wù)器、標(biāo)簽優(yōu)化、動(dòng)態(tài)網(wǎng)站、小程序開(kāi)發(fā)、全網(wǎng)營(yíng)銷推廣

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)