当前位置:网站首页>uniapp防止连续点击出错
uniapp防止连续点击出错
2022-07-27 12:50:00 【乖乖怪123】
- 在项目的根目录下创建一个common文件夹,与page文件夹平级,在common文件夹里面创建一个common.js文件
common.js文件内容如下:
// 处理多次点击
function noMultipleClicks(methods, info) {
// methods是需要点击后需要执行的函数, info是点击需要穿的参数
let that = this;
if (that.noClick) {
// 第一次点击
that.noClick= false;
if(info !== ''){
// info是执行函数需要传的参数
methods(info);
}else{
methods();
}
setTimeout(()=> {
that.noClick= true;
}, 1300)
} else {
console.log("请1.3s后点击");//这里是重复点击的判断
}
}
//导出
export default {
noMultipleClicks,//禁止多次点击
}
- 在与page文件夹平级的main.js文件中引入如下内容:
记得在data中挂载 noClick:true,
//配置公共方法
import common from './common/common.js'
Vue.prototype.$noMultipleClicks = common.noMultipleClicks;
- 在你想要的页面中使用,不带参数,直接传一个方法即可
// 记得在data中挂载 noClick:true
data() {
return {
noClick:true,
}
},
<view class="bottom-btn-box">
<view class="submit-btn" @click="$noMultipleClicks(commitWork)">提交</view>
</view>
methods:{
commitWork(){
console.log("ahhhhh");
}
}
- 在你想要使用的页面中引用,带参数,传一个方法和一个参数即可
记得在data中挂载 noClick:true,
// 记得在data中挂载 noClick:true
data() {
return {
noClick:true,
}
},
<view class="bottom-btn-box">
<view class="pay" @click.stop="$noMultipleClicks(goPay, item)" >支付</view>
</view>
methods:{
goPay(item) {
console.log(item)
//开始你的表演
}
}
边栏推荐
猜你喜欢

接口测试实战教程01:接口测试环境搭建

v-text

面试考点:三种图的问题

Redis summary: cache avalanche, cache breakdown, cache penetration and cache preheating, cache degradation

Seata 在蚂蚁国际银行业务的落地实践

初探基于OSG+OCC的CAD之任意多个子模型进行netgen以及gmsh网格划分

Background and framework introduction and basic environment preparation of hucang integrated e-commerce project

Build mtk6765 compilation environment

Amd adrenalin 22.7.1 driver update: double the performance of OpenGL and support Microsoft win11 22h2 system

Can you tell me the difference between lateinit and lazy in kotlin?
随机推荐
Why does the class annotated with @configuration generate cglib proxy?
18. Text processing tool -grep
Arrays and functions of knowledge in every corner of C language
马斯克被曝绿了谷歌创始人:导致挚友二婚破裂,曾下跪求原谅
能说一说 Kotlin 中 lateinit 和 lazy 的区别吗?
@Simple use of conditional
[node+ts] build node+typescript project
Go语言系列:如何搭建Go语言开发环境?
Detail the construction methods, attributes and common methods in reflection
JS single thread understanding notes - Original
Tools and methods - online flow chart drawing
Amd adrenalin 22.7.1 driver update: double the performance of OpenGL and support Microsoft win11 22h2 system
Delay queue performance test
Insert sort, positive order, reverse order
计算字符串最后一个单词的长度,单词以空格隔开。
改变线程状态的方法
银行案例|Zabbix跨版本升级指南,4.2-6.0不香吗?
How to pass parameters in JNI program
Rotation chart
Icon Font