1. 程式人生 > 實用技巧 >uniapp或者vue防暴力點選

uniapp或者vue防暴力點選

做防爆力點選,就是防抖或者節流,都是為了解決使用者快速點選的時候連續操作兩次或者連續跳轉兩次介面

第一步,新建一個throttle.js

// 處理多次點選
function throttle(fn, params) {
    console.log(fn)
    let that = this;
    if (that.onoff && fn) {
        that.onoff = false;
        if (params) {
            fn(params);
        } else {
            fn()
        }
        setTimeout(function () {
            that.onoff = true;
        }, 1500)
    } else {
        console.log("請稍後點選")
    }
}
export {
throttle}

第二步,在需要防暴力點選介面的data中新增 onoff:true 初始化onshow或者mounted裡也要初始化設定this.onoff = true,因為介面返回可能沒有初始化data裡的資料

第三步,修改點選事件的寫法

<view class="address" @tap="$throttle(choose)"> <view class="userMsg"> <view class="def" v-if="addressMsg.isDefault">預設</view> <view class="name">{{addressMsg.contactName}}</
view> <view class="tel">{{addressMsg.contactPhone}}</view> </view> <view class="addressMsg"> <view class="detailMsg">{{addressMsg.regionName}}{{addressMsg.streetName}}</view> <image class="mores" src="/static/image/trolley/more.png" /> </view> </view>

就是講點選事件巢狀一層,choose是方法名字,如果方法裡需要傳遞引數的話,就這麼寫@tap="$throttle(方法名,引數)"