当用户点击按钮或控件时,如果响应比较慢,往往会重复点击,另外也会存在用户故意反复快速点击的情况,这种时候就会多次触发点击事件造成非期望的结果。如何解决或避免这个问题呢?一般来说有两种情况。 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}}” />未完待续,后面找到其他更好的方法会再更新,也欢迎━(*`∀´*)ノ亻!大家在文下评论交流,谢谢!有时候点击太快的话以上方法在真机赏并不起作用,还是会发起两次请求或者打开多个相同的页面,下面提供更科学的办法: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 点击事件具体执行那个业务 } }} 前端每日一题,带你走入高级前端之路!每天早上9点左右更新题目及前一天的答案!github地址:https://github.com/qappleh/Web-Daily-Question/ 推荐web程序员必备微信号 ▼web夜读课微信号:ydhlwnxs推荐理由:web开发人员都在关注的公众号,在多学一点知识,就可以少写一行代码!专注于技术资源分享,经验交流,最新技术解读,另有海量免费电子书以及成套学习资源,关注web夜读课,做技术得先驱者。 ▼长按下方↓↓↓二维码识别关注
微信小程序防止重复点击的两种处理方法
未经允许不得转载:E企盈小程序开发-热线:4006-838-530 » 微信小程序防止重复点击的两种处理方法
相关推荐
E企盈小程序-微古冶区E企盈小程序信在线客服系统
数据恢复软件(二):用C++重写恢复B乐都县E企盈小程序MP位图文件的小程序
公众号再次改版高坪区E企盈小程序小程序又多了一个入口
微信小程序加载图片时,湘桥区E企盈小程序先拉长,再恢复正常
转:(很有用)有多个按钮,点击一个变色,点击另吴中区E企盈小程序一个变色,原来的恢复颜色的方法
第12课微信小程序Component构造器自道里区E企盈小程序定义组件:
导航中的南海区E企盈小程序小竖线总结
小程序:after实现德格县E企盈小程序1px纵向分割线
汉沽区E企盈小程序企业微信内测朋友圈和客户群功能:小程序C位出道!
小程序运行加载密山市E企盈小程序机制
小程通城县E企盈小程序序中间有字的分隔线
公众号和小程序可以同名了名称支持同主体复盘锦E企盈小程序用
最新评论
独特万商直播系统,直播系统技术开发公司
万商直播系统开发公司
优秀的团队,万商直播管理系统
不错的小程序案例
优秀的团队,不错的服务!
讲的很好
主播长的帅气
好系统好服务