小程序如何避免多次点击,重复触发事件
作为前端开发,我们经常会遇到的场景,比如用户点击获取验证码按钮时,没有反应,大部分用户都会接着点击,这就会造成用户收到多条验证码,这是因为后台api请求比较慢,而客户端体验又做得不到位,导致用户以为没点击到或者是页面假死,在上次请求还没处理完,就再次点击按钮。这对于我们开发来说,这是bug。
如何解决或避免这个问题呢?一般来说有两种情况。
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}}" />
小程序如何避免多次点击,重复触发事件相关推荐
- HTML 点击查看更多,微信小程序加载更多和点击查看更多的实现方法
微信小程序加载更多和点击查看更多的实现方法 发布时间:2020-12-31 11:01:19 来源:亿速云 阅读:126 作者:小新 这篇文章给大家分享的是有关微信小程序加载更多和点击查看更多的实现方 ...
- 小程序 和 uni-app 实现tab点击自动居中屏幕显示
小程序 和 uni-app 实现tab点击自动居中显示 效果 <scroll-view scroll-x class="scrollContent" :scroll-left ...
- 微信小程序 音乐播放控件,监听播放事件, 音乐播放的基本实现
下面我将会为大家初步讲解利用微信小程序的音乐控件制作音乐播放器,以及会遇到的一些问题,最后会附上源码包喔! 图片以及音乐都必须使用网络链接体 播放器 播放之后闪退,是因为音乐的链接失效了所以 闪退 监 ...
- 小程序源码:王者荣耀改重复名,空白名最低战力查询助手-多玩法安装简单
这是一款由重复名,空白名.和各区战力查询组合的一款微信小程序源码! 重复名支持一键生成几十个,就再也不怕都被别人用过了! 空白名支持多种空白名,王者荣耀空白名,贵族居中空白名,QQ微信专属空白名 战力 ...
- 【小程序源码】王者荣耀改重复名,空白名最低战力查询助手
这是一款由重复名,空白名.和各区战力查询组合的一款微信小程序源码! 重复名支持一键生成几十个,就再也不怕都被别人用过了! 空白名支持多种空白名,王者荣耀空白名,贵族居中空白名,QQ微信专属空白名 战力 ...
- 小程序源码:王者荣耀改重复名,空白名最低战力查询助手
这是一款由重复名,空白名.和各区战力查询组合的一款微信小程序源码! 重复名支持一键生成几十个,就再也不怕都被别人用过了! 空白名支持多种空白名,王者荣耀空白名,贵族居中空白名,QQ微信专属空白名 战力 ...
- layer.confirm快速点击会重复触发事件问题
layer.confirm快速点击会重复触发事件问题 1 .问题描述: 快速点击会出现,重复触发事件,像后台发起多次请求,此时后台极端=短时间内多次请求,会出现并发问题,数据脏读 2.问题分析 :查看 ...
- layer.confirm 快速点击会重复触发事件问题
1 .问题描述: 快速点击确定会出现,重复触发事件,像后台发起多次请求,此时后台极端=短时间内多次请求,会出现并发问题,数据脏读 2.问题分析 :查看layerUI的API发现,系统的confirm是 ...
- php点击查看更多,微信小程序加载更多和点击查看更多功能介绍
这篇文章主要为大家详细介绍了微信小程序加载更多,点击查看更多功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 本文实例为大家分享了微信小程序加载更多功能实现的具体代码,供大家参考,具体内容如下 ...
- 小程序轮播图swiper点击图片自定义跳转
我想实现的功能就是,点击首页的轮播图的不同图片,跳转到指定的页面. 点击轮播图的新用户专享图片跳转到新用户活动页面. 最开始我是想通过点击获取轮播图的下标,根据下标判断跳转到相应的页面,但是试了好久并 ...
最新文章
- velocity.js 动画插件
- Zabbix添加客户端步骤
- struts2中action向action之间传数据和action向jsp传数据理解
- Vue实现仿音乐播放器13-实现音乐榜单跳转显以及播放效果
- 深入理解GCD之dispatch_queue
- python之路2.0_Python之路【第二十一篇】:JS基础
- 外围功能电路控制 LET′S TRY“嵌入式编程”: 4 of 6
- innodb_flush_method理解【转】
- 跟着8张思维导图学习javascript
- 人生的两大奇迹思维:杠杆效应+飞轮效应《方法论》
- MySQL Error 1048 奇遇记
- 【JS】导出合并表格
- CSS统计数据记录数量
- 【考研经验】2018福州大学考研初试+复试心得
- 联想拯救者Y9000X 22款的啸叫问题和设置页面黄白切换问题
- ThinkPHP5助手函数汇总
- 网技·理论 3.22
- 大数据产品价值主张_大数据背景下新零售商业模式探究
- 机器学习实战 Python3 实现
- 剖析大数据、人工智能、机器学习、神经网络、深度学习五者之区别与联系
热门文章
- I,P,B帧和PTS,DTS的关系,GOP相关
- Linux电源管理(2)_Generic PM之基本概念和软件架构
- more than one device and emulator
- 从应用层修改系统日期和时间
- python和web前端哪个容易_Python和Web前端选择哪个比较合适?
- modbus tcp主站和从站_实例讲解PLC实现modbus通讯
- JAVA--set用法
- c++中的stl容器——map的介绍与常用用法
- ubuntu20.04下开发海康威视网络摄像头sdk(二)云台基本控制(位姿控制)
- python的类变量和成员变量用法_python中类变量和成员变量、局部变量总结