首页 > 技术文章 > uniapp或者vue防暴力点击

ldlx-mars 2020-08-07 11:23 原文

做防爆力点击,就是防抖或者节流,都是为了解决用户快速点击的时候连续操作两次或者连续跳转两次界面

第一步,新建一个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(方法名,参数)"

推荐阅读