小程序避免多次点击重复触发事件

当用户点击按钮或控件时，如果响应比较慢，往往会重复点击，另外也会存在用户故意反复快速点击的情况，这种时候就会多次触发点击事件造成非期望的结果。如何解决或避免这个问题呢？一般来说有两种情况。 1、点击事件是执行请求这种情况下可以在请求执行之前显示一个模式的加载框，请求完成后再关闭加载框，由于小程序在1.1.0版本基础库才支持wx.showLoading，因此需要对低版本做兼容处理，代码如下：

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

我们可以将显示加载框和关闭加载框的代码放在公共的代码里面比如util，然后在使用时直接调用即可。

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、点击事件是页面跳转当点击事件是页面跳转时，不太适合显示加载框，但小程序的页面跳转并不是很快，如果不作处理又会导致用户反复点击打开多个页面，这里可以使用限制按钮或控件的点击间隔的方式处理，同样可以将这个方法放到公共的代码里面比如util，然后在使用时直接调用即可。

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

首先需要在页面对应的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
    })
  },
})

另外，在wxml的点击控件中通过buttonClicked判断是否可以点击，可以用bindtap也可以用disabled

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

有时候点击太快的话以上方法在真机赏并不起作用，还是会发起两次请求或者打开多个相同的页面。
下面提供更科学的办法：
1、data里面定义3个属性

touchStartTime: 0, // 触摸开始时间
touchEndTime: 0, // 触摸结束时间
lastTapTime: 0 // 最后一次单击事件点击发生时间

2、页面触发这3个事件

<view @tap="doubleTap" @touchstart="touchStart" @touchend="touchEnd">测试重复点击事件</view>

3、methods里面添加3个方法

// 防止重复点击
touchStart(e) {
  this.touchStartTime = e.timeStamp;
},
touchEnd(e) {
  this.touchEndTime = e.timeStamp;
},
doubleTap(item, e) {
  var vm = this;
  // 控制点击事件在350ms内触发，加这层判断是为了防止长按时会触发点击事件
  if (vm.touchEndTime - vm.touchStartTime < 350) {
    // 当前点击的时间
    var currentTime = e.timeStamp;
    var lastTapTime = vm.lastTapTime;
    // 更新最后一次点击时间
    vm.lastTapTime = currentTime;
    // 如果两次点击时间在300毫秒内，则认为是双击事件
    if (currentTime - lastTapTime > 300) {
      // do something 点击事件具体执行那个业务
    }
  }
}

原文链接：https://blog.csdn.net/qappleh/article/details/84033766

eva_feng

发布了21 篇原创文章 · 获赞 1 · 访问量 7809

私信关注

小程序避免多次点击重复触发事件

猜你喜欢