关于小程序:uniapp小程序防止二次点击问题解决方案

4次阅读

共计 724 个字符,预计需要花费 2 分钟才能阅读完成。

背景:小程序有的中央点击 如果申请比较慢,就会关上两次新页面,所以这里对用户短时间双击进行了解决
如果有更好的办法 请留言哦 我参考学习下
我也是参考了他人的:https://blog.csdn.net/weixin_…
1. 封装公共办法

export function disableDoubleClick(fn, flag, data = {}) {
  let that = this;
// 这里 flag 也是为了避免一个页面多个点击事件

  if (that[flag]) {that[flag] = false;
    fn(data);
    setTimeout(function() {that[flag] = true;
    }, 1500)
  } else {
    // 如果始终走 else 分支可能是你没有在页面的 data 上面挂载 flag:true, 不然始终都会走 else
    console.log("请稍后点击")
  }
}

2. 挂在在 vue 中

import {disableDoubleClick} from '../utils/utilsFn.js'
Vue.prototype.$disableDoubleClick = disableDoubleClick;
  1. 须要的页面应用
     <view class="xf-act-btn"    @click="$disableDoubleClick (handleLogin ,'onoff')" > 开始提货 </view>
     <view class="history-btn"  @click="$disableDoubleClick(historyPage ,'onoff1')"> 历史提货 </view>


留神 data 定义一下,这里可能我解决的简单了,能够优化
data(){
  return {
    onoff:true,
    onoff1:true,
  }
 }
正文完
 0