微信小程序防止重复点击,该如何处理?
时间:2022-05-03
本文章向大家介绍微信小程序防止重复点击,该如何处理?,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
当用户点击按钮或控件时,如果响应比较慢,往往会重复点击,另外也会存在用户故意反复快速点击的情况,这种时候就会多次触发点击事件造成非期望的结果。如何解决或避免这个问题呢?一般来说有两种情况。 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}}" />
- Selenium2+python自动化8-SeleniumBuilder辅助定位元素
- HDU 1250 Hat's Fibonacci
- Scrapy在Ubuntu下的安装与配置
- Selenium2+python自动化20-引入unittest框架
- HDU 1002 A + B Problem II(高精度加法(C++/Java))
- POJ 1018 Communication System
- POJ 1017 Packets
- Codeforces 725B Food on the Plane
- Codefoces 723B Text Document Analysis
- Codefoces 723A The New Year: Meeting Friends
- ECJTUACM16 Winter vacation training #1 题解&源码
- 信息学奥赛一本通算法(C++版)基础算法:高精度计算
- 看破欧拉函数的奥秘
- 线段树入门总结
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 在MacOSX机器上设置JenkinsCI服务器
- springboot2配置文件定义${user.name}内容失效问题探究
- 重学Javascript之数据类型
- JPEG/Exif/TIFF格式解读(1):JEPG图片压缩与存储原理分析
- 聊聊dubbo-go的ProviderAuthFilter
- 仅需四步,写一个springboot starter
- 重学Javascript之类型转换
- Spring Cloud 微服务(九)- 集成 Spring Boot Admin
- 聊聊dubbo-go的RPCInvocation
- 程序员是怎么记住一堆密码的?
- 腾讯大牛教你MySQL 8.0 PFS histogram解析与优化
- Python __init__.py 作用详解
- Python创建包,导入包
- Python查看模块(变量、函数、类)方法
- Python __doc__属性:查看文档