微信小程序防连点时间_微信小程序防止重复点击

当用户点击按钮或控件时，如果响应比较慢，往往会重复点击，另外也会存在用户故意反复快速点击的情况，这种时候就会多次触发点击事件造成非期望的结果。如何解决或避免这个问题呢？一般来说有两种情况。

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

微信小程序防连点时间_微信小程序防止重复点击相关推荐

微信登录画面_微信登录界面的地球变了_微信登录界面首变真相
细心的小伙伴发现在启动微信的时候,那个经典的一个小人剪影面对着地球的画面开始发生了一些变化,似乎云层变得更为清晰细致了.微信登录界面6年来首变化,那么为何改变来的如此突然呢,下面小编就分享给大家! 手 ...
微信公众号怎么推送消息_微信公众号发送消息
A.模板消息发送模板消息仅用于公众号向用户发送重要的服务通知,只能用于符合其要求的服务场景中,如信用卡刷卡通知,商品购买成功通知等.不支持广告等营销类消息以及其它所有可能对用户造成骚扰的消息. 备注 ...
微信小程序等待几秒、_微信小程序—setTimeout定时器的坑
背景实验室需要将项目的app搬到微信的小程序上,终于知道为什么程序员是手艺人了,只要有需求,就要想方设法去填充这种需求,去年是小程序的元年了可以说,去年冬天一个叫跳一跳的小程序游戏出现在我的微信中, ...
微信小程序怎么实现陪诊服务_陪诊小程序怎么做
小编今天要分享的是一个服务行业的微信小程序,对于很多城市来说现在陪诊服务越来越多人需要了,不仅仅是因为子女不在老人身边,还有就是医院的服务配置设施越来越智能化,操作也基本上离不开智能机,如果有专业的陪 ...
c++如何让程序异常以后继续执行_微信商城小程序开发首页广告如何布局？c
小程序的开发使得商家变现微信流量越来越便利,因此各类小程序制作数量不断增加,特别是不少商家选择制作商城类小程序.而在进行小程序制作的时候,是需要布局相应广告来进行流量转化的,那么微信商城小程序开发首页 ...
小程序文章怎么导出来_微信小程序点餐怎么申请，怎么建立微信点单小程序
微信点餐小程序/微信点餐商家版/微信点餐系统/微信点餐平台/点击上方"蓝字"关注我们我怎么做微信小程序点餐我们先要申请一个微信公众号,如果您有营业执照可以注册认证一个服务号申 ...
小程序开发用什么编程语言_微信小程序开发教程是什么？费用多少？
微信小程序如今已经非常常见,渗透到了我们日常生活的方方面面,包括生活服务.出行.点餐.电商购物.企业展示--商家可以开发适合自己行业的小程序,以吸引线上用户,同时提高自身服务运营效率.不过这些不同种类 ...
微信小程序跳过第三方的_微信小程序怎么解除第三方授权？
平时我们用使用一个新的小程序时,通常都会弹出一些第三方授权的窗口,要授权成功才能正常使用小程序.而其中或多或少会涉及一些个人隐私信息,如果我们不需要再使用这些小程序,想要取消授权应该怎么做呢? 一.在 ...
微信小程序怎么弄成链接_微信小程序怎么复制链接技术方法帮你解决
总是听到很多朋友在问微信小程序怎么复制链接,其实方法还是比较多的.微信小程序现在用的人非常多,而且带起了一阵潮流之风,如果你还没有用过,那你就是太OUT了.下面我们就来为大家介绍一下技术的方法怎么解决 ...

微信小程序防连点时间_微信小程序防止重复点击

微信小程序防连点时间_微信小程序防止重复点击相关推荐

最新文章

热门文章

微信小程序 防连点时间_微信小程序防止重复点击

微信小程序 防连点时间_微信小程序防止重复点击相关推荐

最新文章

热门文章

微信小程序防连点时间_微信小程序防止重复点击

微信小程序防连点时间_微信小程序防止重复点击相关推荐