uni-app 如何避免点击跳转短时间内连续触发？

最新推荐文章于 2025-03-24 11:22:45 发布

原创最新推荐文章于 2025-03-24 11:22:45 发布 · 置顶 · 6.3k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#vue

vue 同时被 2 个专栏收录

7 篇文章

订阅专栏

uin-app

5 篇文章

订阅专栏

在uni-app开发中，连续点击会导致多次页面跳转。本文介绍了一种通过自定义指令解决此问题的方法，该指令可全局监听点击事件，并在短时间内阻止重复触发，有效避免了连续点击引发的页面重复加载。

uni-app开发过程中，我们在元素上加个事件进行页面跳转，连续点击会跳转多个页面；解决方案：写一个指令全局监听事件并阻止短时间内连续触发具体代码如下：

globalPul.js

const globalPul = {
	install: function(Vue, pluOp = {}) {
		// 全局点击事件监听阻止
		Vue.directive('preventReClick', {
			inserted(el, binding) {
				el.addEventListener('click', (e) => {
				if (!el.$disabled) {
						el.$disabled = true;
						el.$click=[...el.events.click];
						el.events.click = [];
						setTimeout(() => {
							el.events.click = el.$click;
							el.$disabled = false;
					
						}, binding.value || 1000)
					
					}
				})
			}
		})
	}
};

export default globalPul

main.js 引入该js

页面使用

<view class="m01_item" v-preventReClick @click ="toStudy()">
					<view class="menu_img">
						<image src="../../static/tiku/pasttest.png" mode=""></image>
					</view>
					<view class="menu_tit">
						历年真题
					</view>
				</view>