微信小程序> 微信小程序防止重复点击

微信小程序防止重复点击

浏览量:707 时间: 来源:weixin_34055787
有时候,用户点击按钮或控件时,如果响应比较慢或者网速差,往往会重复多次点击,当然也有一部分想要找茬的用户故意反复快速点击,导致多次触发点击事件造成非期望的结果。为了避免这个问题,大致分这两种解决方式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    })  },})

 

小程序

版权声明

即速应用倡导尊重与保护知识产权。如发现本站文章存在版权问题,烦请提供版权疑问、身份证明、版权证明、联系方式等发邮件至197452366@qq.com ,我们将及时处理。本站文章仅作分享交流用途,作者观点不等同于即速应用观点。用户与作者的任何交易与本站无关,请知悉。

产品经理

手机 : 13312967497

擅长 : 小程序流量变现

扫码领取礼包

热门模板

  • 头条
  • 搜狐
  • 微博
  • 百家
  • 一点资讯
  • 知乎