微信小程序按钮防止重复点击

小程序中经常会有些按钮最好别重复点击, 不然会出现不必要的bug和体验, 这时候就要用到 防抖节流的知识:

 

方法1 全局设置方法 在需要的页面单独控制

app.js

globalData: {
    PageActive: true
},
// 防止重复点击事件
preventActive (fn) {
  const self = this
  if (this.globalData.PageActive) {
      this.globalData.PageActive = false
      if (fn) fn()
      setTimeout(() => {
        self.globalData.PageActive = true
      }, 1500); //设置该时间内重复触发只执行第一次，单位ms，按实际设置
  } else {
      console.log('重复点击或触发')
  }
}

index.js

// getApp()  是全局方法 
getBtn:function(){
  getApp().preventActive(()=>{
      ajax('/pages/index', {
        data:{
          id:this.data.id
        },
      }, res => {
        if(res.code == 0){ 
          console.log(res,'1500秒后再次点击才生效')
        }
      })
  })
}

 

 

方法2

1.执行请求时使用wx.showLoading

util.js文件

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();
  }
}

index.js文件（需要的js文件）

function request() {
  util.showLoading('加载中...');
  ajax('/pages/index', {
    data:{
      id:this.data.id
    },
   }, res => {
        util.hideLoading()
        if(res.code == 0){ 
          console.log(res,'返回值')
        }
  })
}

2.页面跳转时，由于小程序的页面跳转并不是很快，可以选择用加载框，也可以限制按钮或控件的点击间隔的方式处理（更合适）

util.js文件

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

index.js

Page({
  data: {
    buttonClicked: false
  },
  click: function (e) {
    util.buttonClicked(this);
    var id = e.currentTarget.dataset.id;
    wx.navigateTo({
      url: '../detail/detail?id=' + id
    })
  },
})

或
直接wxml中判断，不需要在index.js中操作
index.wxml

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