做防爆力點擊,就是防抖或者節流,都是為了解決用戶快速點擊的時候連續操作兩次或者連續跳轉兩次界面
第一步,新建一個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(方法名,參數)"