微信小程序防止重复点击

有时候，用户点击按钮或控件时，如果响应比较慢或者网速差，往往会重复多次点击，当然也有一部分想要找茬的用户故意反复快速点击，导致多次触发点击事件造成非期望的结果。为了避免这个问题，大致分这两种解决方式

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
    })
  },
})

 

转载于:https://www.cnblogs.com/xiaokele1314/p/10194529.html