• 博客园logo
  • 会员
  • 众包
  • 新闻
  • 博问
  • 闪存
  • 赞助商
  • HarmonyOS
  • Chat2DB
    • 搜索
      所有博客
    • 搜索
      当前博客
  • 写随笔 我的博客 短消息 简洁模式
    用户头像
    我的博客 我的园子 账号设置 会员中心 简洁模式 ... 退出登录
    注册 登录
LDLX@Y火星
博客园    首页    新随笔    联系   管理    订阅  订阅

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(方法名,参数)"

posted @ 2020-08-07 11:23  火星黑洞  阅读(2629)  评论(0)    收藏  举报
刷新页面返回顶部
博客园  ©  2004-2025
浙公网安备 33010602011771号 浙ICP备2021040463号-3