uniapp，小程式防止二次點選問題，解決方案

那年發表於2022-04-02
APP

背景：小程式有的地方點選 如果請求比較慢，就會開啟兩次新頁面，所以這裡對使用者短時間雙擊進行了處理
如果有更好的方法 請留言哦 我參考學習下
我也是參考了別人的：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,
  }
 }

相關文章