uni 阻止按钮多次点击按钮多次点击

原创已于 2022-07-15 10:22:24 修改 · 1.7k 阅读

2 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#uni-app

于 2021-01-03 15:08:24 首次发布

uniapp 专栏收录该内容

10 篇文章

订阅专栏

在uni-app中，为了阻止按钮多次点击，可以在文件夹下创建一个js文件，然后在main.js导入并使用。该方法适用于防止接口重复提交，通过设置变量控制按钮是否可点击，若接口请求中则提示并禁用，失败后恢复可点击状态。

文件夹下新建一个js文件内容如下

function noMore() {
    let that = this;
    if (that.btn_show) {
        that.btn_show = false;
        setTimeout(function () {
            that.btn_show = true;
			console.log(that.btn_show)
        }, 1500)
    } else {
        console.log("请勿频繁点击")
    }
}
export default {
    noMore
}

main.js导入

import noMore from './components/btn_click.js'

Vue.prototype.$noMore = noMore.noMore

使用

<view class="" @click="$noMore(btn_click(123)) "></view>

export default {
		data() {
			return {
				btn_show:true
			}
		},
		methods: {
			btn_click(e) {
				console.log(e)
			}
		}
	}