详解小程序如何避免多次点击,重复触发事件-创新互联

作为前端开发,我们经常会遇到的场景,比如用户点击获取验证码按钮时,没有反应,大部分用户都会接着点击,这就会造成用户收到多条验证码,这是因为后台api请求比较慢,而客户端体验又做得不到位,导致用户以为没点击到或者是页面假死,在上次请求还没处理完,就再次点击按钮。这对于我们开发来说,这是bug。

创新互联建站"三网合一"的企业建站思路。企业可建设拥有电脑版、微信版、手机版的企业网站。实现跨屏营销,产品发布一步更新,电脑网络+移动网络一网打尽,满足企业的营销需求!创新互联建站具备承接各种类型的做网站、网站建设项目的能力。经过10年的努力的开拓,为不同行业的企事业单位提供了优质的服务,并获得了客户的一致好评。

如何解决或避免这个问题呢?一般来说有两种情况。

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

网页名称:详解小程序如何避免多次点击,重复触发事件-创新互联
本文URL:http://ybzwz.com/article/ihgdd.html