vue、uniapp 小程序点击事件禁止多次点击方法封装

在写uniapp 小程序时发现个bug,疯狂点击按钮第一点击事件还没执行完就疯狂多次调用该事件，很是影响用户体验以及消耗性能，所以这里我封装个禁止多次调用的方法，uniapp、vue同时使用。

第一步创建一个公共js文件，写好公共方法导出来

// 防止处理多次点击
function noMultipleClicks(methods, info) {// methods是点击后需要执行的函数， info是函数需要传的参数let that = this;if (that.noClick) {// 第一次点击that.noClick= false;if((info && info !== '') || info ==0) {// info是执行函数需要传的参数methods(info);} else {methods();}setTimeout(()=> {that.noClick= true;}, 2000)} else {//  这里是重复点击的判断}
}
//导出
export default {noMultipleClicks,  // 禁止多次点击
}

第二步在main.js文件中全局引入，因为有多个地方使用到

import common from './utils/common.js'
Vue.prototype.$noMultipleClicks = common.noMultipleClicks;

在页面上直接这样使用，`noMultipleClicks`需要传的第一个参数是对应的点击方法，第二个参数是点击方法的形参，在页面上还声明noClick变量为true

noMultipleClicks(methods, info)
noClick:true,

vue、uniapp 小程序点击事件禁止多次点击方法封装相关推荐

【vue uniapp 小程序抽奖转盘老虎机和九宫格】
vue uniapp 小程序抽奖转盘老虎机和九宫格 1.npm 下载插件 # npm 安装 npm install @lucky-canvas/vue@latest# 或者 yarn 安装 yarn ...
微信小程序只允许触发一次点击事件(防止多次点击事件)
微信小程序只允许触发一次点击事件(防止多次点击事件) 超级简单容易理解可以让绑定的事件只触发一次 //.wxml <button bindtap="click1"> ...
vue H5、uniapp小程序的文件下载
H5 获取到下载链接直接用window.open(url, "_self")打开 uniapp 小程序 wx.downloadFile({ url:url,//下载文件在服务器上的 ...
微信小程序禁止页面上下滑动；uni-app微信小程序禁止页面上下滑动；uni-app小程序上下滑动；
阻止小程序某个页面上下滑动,最简单有效方法:直接对小程序当前页的最外层标签盒子,设置固定定位即可! 设置固定定位后,页面的最大盒子宽度可能不是自动撑满的,那就自己在calc计算下宽度即可 .box { ...
Uni-app小程序问题汇总
1.新建的uniapp项目,运行到小程序报错,信息如下,一时找不到解决办法 vite v2.9.12 building for development... 'isVNode' is not expo ...
uniapp 小程序加载显示插屏广告
uniapp插屏广告文档uni-app官网uni-app:一个使用 Vue.js 开发跨平台应用的前端框架https://uniapp.dcloud.io/api/a-d/interstitial微信 ...
Uniapp-微信小程序实现全局事件监听并进行数据埋点
Uniapp-微信小程序实现全局事件监听并进行数据埋点零.前言最近接到需求,领导希望使用微信开放平台上免费的We分析进行数据埋点,但又不希望在现有uniapp开发的微信小程序代码上做侵入式修改,笔 ...
uniapp小程序商城开发thinkphp6积分商城、团购、秒杀封装APP
uniapp小程序商城开发thinkphp6积分商城.团购.秒杀封装APP,后台是vue开发需要源代码的可以联系我,找我要哦 <template><view v-if=" ...
uniapp —— 小程序实现带参分享微信、朋友圈以及调试获取参数
uniapp -- 小程序实现带参分享微信.朋友圈以及调试获取参数零.起因以及分类小程序我们在开发微信小程序的过程中,经常需要实现分享给微信用户或者分享到微信朋友圈的功能,基本上我们会用到 on ...

vue、uniapp 小程序点击事件禁止多次点击方法封装

vue、uniapp 小程序点击事件禁止多次点击方法封装

第一步创建一个公共js文件，写好公共方法导出来

第二步在main.js文件中全局引入，因为有多个地方使用到

在页面上直接这样使用，`noMultipleClicks`需要传的第一个参数是对应的点击方法，第二个参数是点击方法的形参，在页面上还声明noClick变量为true

vue、uniapp 小程序点击事件禁止多次点击方法封装相关推荐

最新文章

热门文章

vue、uniapp 小程序点击事件禁止多次点击方法封装

vue、uniapp 小程序点击事件禁止多次点击方法封装

第一步创建一个公共js文件，写好公共方法导出来

第二步在main.js文件中全局引入，因为有多个地方使用到

在页面上直接这样使用，noMultipleClicks需要传的第一个参数是对应的点击方法，第二个参数是点击方法的形参，在页面上还声明noClick变量为true

vue、uniapp 小程序点击事件禁止多次点击方法封装相关推荐

最新文章

热门文章

在页面上直接这样使用，`noMultipleClicks`需要传的第一个参数是对应的点击方法，第二个参数是点击方法的形参，在页面上还声明noClick变量为true