uni-app 如何避免点击跳转短时间内连续触发?
uni-app开发过程中,我们在元素上加个事件进行页面跳转,连续点击会跳转多个页面;解决方案:写一个指令全局监听事件并阻止短时间内连续触发具体代码如下:globalPul.jsconst globalPul = {install: function(Vue, pluOp = {}) {// 插件注册对象表Vue.$plu = Vue.prototype.$plu = {...
·
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>
更多推荐
已为社区贡献2条内容
所有评论(0)