uni-app点击按钮防抖操作

短命女 2022-09-13 11:28 294阅读 0赞

*  在根目录下新建common文件并创建common.js文件，代码如下

// 防止处理多次点击
    function noMultipleClicks(methods, info) {
        // methods是需要点击后需要执行的函数， info是点击需要传的参数
        let that = this;
        if (that.noClick) {
            // 第一次点击
            that.noClick= false;
            if(info && info !== '') {
                // info是执行函数需要传的参数
                methods(info);
            } else {
                methods();
            }
            setTimeout(()=> {
                that.noClick= true;
            }, 2000)
        } else {
            // 这里是重复点击的判断
        }
    }
    //导出
    export default {
        noMultipleClicks,//禁止多次点击
    }

*  man.js文件引入

//配置公共方法
    import common from './common/common.js'
    Vue.prototype.$noMultipleClicks = common.noMultipleClicks;

*  在实际页面中引用，不带参数,直接传一个方法就行

//记得在data中挂载   noClick:true，否则点击会失效
    data() {
        return {
            noClick:true,
        }
    },
    
    <view class="bottom-btn-box">
        <view class="submit-btn" @click="$noMultipleClicks(commitWork)">提交</view>
    </view>
    
    methods:{
        commitWork(){
            //balabala
        }           
    }

*  在实际页面中引用，带参数,传一个方法和一个参数就行

//记得在data中挂载   noClick:true，否则点击会失效
    data() {
        return {
            noClick:true,
        }
    },
    
    <view class="bottom-btn-box">
        <view class="pay" @click.stop="$noMultipleClicks(goPay, item)" >支付</view>
    </view>
    
    methods:{
        goPay(item){
            //balabala
        }           
    }

参考作者：[Uniapp点击按钮防抖操作 - DreamTraveler - 博客园][Uniapp_ - DreamTraveler -]

[Uniapp_ - DreamTraveler -]: https://www.cnblogs.com/ly1368489670/p/14293963.html