小程序如何避免屡次点击，重复触发事件

小程序如何避免屡次点击，重复触发事件 2018年09月10日 09:51:49 honey缘木鱼 阅读数：7759 标签： 重复点击 更多 我的分类： 小程序 做为前端开发，咱们常常会遇到的场景，好比用户点击获取验证码按钮时，没有反应，大部分用户都会接着点击，这就会形成用户收到多条验证码，这是由于后台api请求比较慢，而客户端体验又作得不到位，致使用户觉得没点击到或者是页面假死，在上次请求还没处理完，就再次点击按钮。这对于咱们开发来讲，这是bug。

如何解决或避免这个问题呢？通常来讲有两种状况。

一、点击事件是执行网络请求（提交评论，验证码，支付） 这种状况下能够在请求执行以前显示一个模式的加载框，请求完成后再关闭加载框。 ，因为小程序在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() ... } }) } 二、点击事件是页面跳转 当点击事件须要页面跳转时，不太适合显示加载框，但小程序的页面跳转并非很快，若是不做处理又会致使用户反复点击打开多个页面，这里可使用限制按钮或控件的点击间隔的方式处理，一样能够将这个方法放到公共的代码里面好比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