uniapp 微信小程序 接口请求防抖加遮罩

uniapp yekong

uniapp微信小程序在请求接口时,添加了防抖,但是客户仍然能够重复提交,为此,除了防抖,额外再次添加了遮罩,用以避免用户重复点击。

防抖

使用uview实现防抖和节流

			<div class="logout" @tap="$u.debounce(caseAdd, 500)">
				发布
			</div>

使用uni.showLoading 作为遮罩,避免重复点击

uni.showLoading({
					title: '提交中',
					mask: true
				})
caseAdd() {
				var that = this;
				if (!this.select) {
					uni.showToast({
						title: '请同意协议后操作',
						icon: 'none'
					})
					return
				}
				if (!this.data.img) {
					uni.showToast({
						title: '请上传封面',
						icon: 'none'
					})
					return
				}
				if (!this.data.remark) {
					uni.showToast({
						title: '请输入描述',
						icon: 'none'
					})
					return
				}
				if (!this.data.title) {
					uni.showToast({
						title: '请输入任务标题',
						icon: 'none'
					})
					return
				}
				if (this.worksimg) {
					this.data.img = this.data.img + ',' + this.worksimg
				}
				uni.showLoading({
					title: '提交中',
					mask: true
				})
				caseAdd(that.data).then(res => {
					uni.hideLoading()
					if (res.code == 200) {
						uni.showToast({
							title: '发布成功',
							icon: 'none'
						})
						uni.navigateBack({

						})
					}
				}).catch(err => {

				})
			}
喜欢