干掉微信小程序-避免多次点击,重复触发事件
干掉微信小程序-避免多次点击,重复触发事件#
问题描述#
开发小程序时,或者说是在做前端的时候,我们经常会遇到当用户点击某个按钮时,没有得到反馈的话,大部分用户都会接着点击,这就会造成前端接收到多次请求的响应。
这主要是因为后端api请求需要时间,导致用户以为没点击到或者是页面假死,在上次请求还没处理完,就再次点击按钮。
所以,接下来说说,在微信小程序中避免多次点击,重复触发事件的两种思路。
解决方法一:#
使用 wx.showLoading 在请求执行之前显示一个加载框,请求完成后再关闭加载框。
js代码#
Copy
showLoading:function(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 }); } } hideLoading:function() { if (wx.hideLoading) { // 基础库 1.1.0 微信6.5.6版本开始支持,低版本需做兼容处理 wx.hideLoading(); } else { wx.hideToast(); } }
解决方法二:#
使用限制按钮或控件的点击时间间隔的方式处理。
js代码#
Copy
Page({ data: { buttonClicked: false }, click: function (e) { this.buttonClicked(this); }, }) ... ... buttonClicked:function (_this) { _this.setData({ buttonClicked: true }) setTimeout(function () { _this.setData({ buttonClicked: false }) }, 500) }
wxml代码#
Copy
<view bindtap="{{!buttonClicked?'click':''}}"" /> <button bindtap="{{!buttonClicked?'click':''}}" /> <button bindtap="click" disabled="buttonClicked" />