小程序按钮重复点击解决方案

这篇具有很好参考价值的文章主要介绍了小程序按钮重复点击解决方案。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。


前言

小程序是直面用户便捷的应用,而在用户使用时往往都会涉及到关键节点的按钮点击,例如,注册登录时,页面跳转时,发送验证码时,付钱还款,弹出提示等等。。。如果没有控制好按钮重复点击的问题,那么影响用户体验。当然有时候也会被同行吐槽,这人不行。。。


一、为什么会发生重复点击

1、点击按钮后有网络请求,请求有时长。此时用户可能在网络请求成功前,再次点击按钮。
2、点击按钮后没有给到用户好的反馈效果,用户以为没有点击到,或者没有点击成功。
3、手机发生卡顿,应用性能下降,点击按钮事件实际已经触发,但是没有反馈效果,用户再次点击。

二、针对以上问题怎么处理

1、分析解决方法:

1、当用户点击按钮后,给到用户点击反馈。
2、当用户点击按钮后,禁用按钮,不可再次点击。

1. 反馈

当触发按钮点击事件,并且关联重要网络请求,需要给出反馈,以下举例集中反馈方法。
1、按钮loading
直接利用小程序按钮组件提供的loading属性,动态控制按钮loading效果

<template>
	<view class="content">
		<button @tap="dianJi" :loading="isClick">
			点击-{{!isClick ? "可以点击" : "不可以点击"}}
		</button>
	</view>
</template>

<script setup>
	import {
		ref
	} from "vue"
	let isClick = ref(false)
	const dianJi = () => {
		isClick.value = true
		setTimeout(()=>{
			isClick.value = false
		}, 2000)
	}
</script>

小程序防止按钮重复点击,小程序,uniapp,小程序,前端框架,微信小程序

2、页面loading
利用uni.showLoading api完成

<template>
	<view class="content">
		<button @tap="dianJi">
			点击-{{!isClick ? "可以点击" : "不可以点击"}}
		</button>
	</view>
</template>

<script setup>
	import {
		ref
	} from "vue"
	let isClick = ref(false)
	const dianJi = () => {
		uni.showLoading({
			mask: true,
			title: "请稍候"
		})
		isClick.value = true
		setTimeout(()=>{
			isClick.value = false
			uni.hideLoading()
		}, 2000)
	}
</script>

3、点击效果样式变化
利用组件提供属性,设置点击改变背景颜色

<template>
	<view class="content">
		<button @tap="dianJi" hover-class="isClickStyle">
			点击-{{!isClick ? "可以点击" : "不可以点击"}}
		</button>
	</view>
</template>
<script setup>
	import { ref } from "vue"
	let isClick = ref(false)
	const dianJi = () => {
		isClick.value = true
		setTimeout(()=>{
			isClick.value = false
		}, 2000)
	}
</script>
<style>
	.isClickStyle {
		background-color: aquamarine;
	}
</style>

当然你也可以用伪类选择器设置颜色-当然还是建议使用官方提供的属性来设置,毕竟不会有问题

<style>
	button:active {
		background-color: aqua;
	}
</style>

小程序防止按钮重复点击,小程序,uniapp,小程序,前端框架,微信小程序

4、toast提示
只需用到uni api 就可以实现更多用法可以参考文档

uni.showToast({
	title: '点击'
})

小程序防止按钮重复点击,小程序,uniapp,小程序,前端框架,微信小程序

2.禁用

当触发按钮点击事件时,禁用按钮,不可点击。
1、禁用按钮disabled
功能描述: 点击按钮控制标识,动态控制disabled属性。

<template>
	<view class="content">
		<button
		 @tap="dianJi"
		 :disabled="!isClick"
		>
		 点击-{{isClick ? "可以点击" : "不可以点击"}}
		</button>
	</view>
</template>

<script setup>
import { ref } from "vue"
let isClick = ref(true)
const dianJi = () => {
	isClick.value = false
	// 模拟异步请求
	setTimeout(() => {
		isClick.value = true
	}, 2000);
};
</script>

2、点击样式控制pointer-events
功能描述: 点击按钮控制标识,动态控制css样式pointer-events属性。

<template>
	<view class="content">
		<button
		 @tap="dianJi"
		 :style="{'pointer-events': isClick ? 'auto' : 'none'}"
		>
		 点击-{{isClick ? "可以点击" : "不可以点击"}}
		</button>
	</view>
</template>

<script setup>
import { ref } from "vue"
let isClick = ref(true)
const dianJi = () => {
	isClick.value = false
	// 模拟异步请求
	setTimeout(() => {
		isClick.value = true
	}, 7000);
};
</script>

4、js控制标识阻止代码执行

<template>
	<view class="content">
		<button
		 @tap="dianJi"
		>
		 点击-{{isClick ? "可以点击" : "不可以点击"}}
		</button>
	</view>
</template>

<script setup>
import { ref } from "vue"
let isClick = ref(true)
const dianJi = () => {
	if (!isClick.value) {
		return
	}
	isClick.value = false
	// 模拟异步请求
	setTimeout(() => {
		isClick.value = true
	}, 2000);
};

5、节流防抖–具体代码讲解应该很熟悉了,就不讲解了
防抖

let timeout;
function debounce(func, wait, immediate) {
	return function() {
		let context = this;
		let args = arguments;
		if (timeout) clearTimeout(timeout); 
		if (immediate) {
			let callNow = !timeout; 
			timeout = setTimeout(function() {
				timeout = null;
			}, wait)
			if (callNow) {
				func.apply(context, args)
			}
		} else {
			timeout = setTimeout(function() {
				func.apply(context, args)
			}, wait);
		}
	}
}

节流

let timer = null
function throttled(fn, delay) {
	let starttime = Date.now()
	return function() {
		let curTime = Date.now() 
		let remaining = delay - (curTime - starttime) 
		let context = this
		let args = arguments
		clearTimeout(timer)
		console.log(65654645, remaining <= 0)
		if (remaining <= 0) {
			fn.apply(context, args)
			starttime = Date.now()
		} else {
			timer = setTimeout(fn, remaining);
		}
	}
}

三、最优解决

1、将用户点击反馈和按钮禁用结合使用


总结

如有问题欢迎指出,如果有其他办法欢迎评论指导学习。文章来源地址https://www.toymoban.com/news/detail-548017.html

到了这里,关于小程序按钮重复点击解决方案的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【微信小程序】按钮button组件宽设置无效解决方案

    给button组件添加一个class类名,在对应的wxss中编写宽的设置样式,竟然发现无效, 审查元素后发现了原因,被小程序自带的样式影响了 当没有设置size=\\\"mini\\\"的属性时,被小程序自带默认样式button:not([size=mini])中设置的width:184px优先级更高给覆盖了 当设置了size=\\\"mini\\\"的属性时,

    2024年02月10日
    浏览(109)
  • 微信小程序webview内嵌H5跳转页面后没有返回按钮完美解决方案

    简单的讲就是我们可以在小程序内放置一个web-view组件来链接我们的HTML页面了。 但是点击跳转页面的时候。页面左上角没有!!返回按钮!!导致回不去了,这不是搞笑的吗。 看了下其他的小程序,发现如果是两个小程序页面跳转的话,第二个页面的左上角是会有返回按钮

    2024年02月08日
    浏览(64)
  • 微信小程序——同一控件的点击与长按事件共存的解决方案

    ✅作者简介:2022年 博客新星 第八 。热爱国学的Java后端开发者,修心和技术同步精进。 🍎个人主页:Java Fans的博客 🍊个人信条:不迁怒,不贰过。小知识,大智慧。 💞当前专栏:微信小程序学习分享 ✨特色专栏:国学周更-心性养成之路 🥭本文内容:微信小程序——实

    2024年02月15日
    浏览(34)
  • JavaScript防止重复点击或者点击过快的方法

    在Web开发中,我们经常面临一个问题,即用户在点击按钮或执行某些操作时,可能会重复点击或者点击过快,导致不必要的重复请求或错误行为。为了解决这个问题,我们可以使用一些技术手段来防止重复点击或者点击过快。本文将介绍几种常见的方法,并提供相应的源代码

    2024年02月01日
    浏览(64)
  • Kafka数据重复问题解决方案

    通常,消息消费时候都会设置一定重试次数来避免网络波动造成的影响,同时带来副作用是可能出现消息重复。 幂等性指: 幂等性使用示例: 为了更好理解,需要了解下Kafka幂等机制 这种设计针对解决了两个问题: 那什么时候该使用幂等: 事务使用示例:分为生产端 和

    2024年02月07日
    浏览(53)
  • vue中使用element-ui,重复点击按钮或多个请求同时报错时弹出多个message弹框解决方法

    1. 用这种 2. 参考: vue中使用element-ui,重复点击按钮或多个请求同时报错时弹出多个message弹框解决方法_donggua_123的博客-CSDN博客

    2024年02月11日
    浏览(47)
  • 【解决方案】Java 互联网项目如何防止集合堆内存溢出(一)

    目录 前言 一、代码优化 1.1Stream 流自分页 1.2数据库分页 1.3其它思考 二、硬件配置 2.1云服务器配置 三、文章小结 OOM 几乎是笔者工作中遇到的线上 bug 中最常见的,一旦平时正常的页面在线上出现页面崩溃或者服务无法调用,查看服务器日志后你很可能会看到“ Caused by: ja

    2024年02月20日
    浏览(47)
  • PDF加粗内容重复读取解决方案

    在使用 pdfplumber 读取 PDF 的过程中,由于加黑的内容会被莫名其妙的读取两次,带来了很大的困扰。这篇文章将给出解决方案。 在在使用 pdfplumber 读取 PDF 的过程中,读取普通内容是完全没有问题的。但是该公司早期 PDF 并未完全规范的过程中,有些标题加粗了,而有些却没有

    2024年02月22日
    浏览(38)
  • 记录--按钮防连点终极解决方案

    在日常前端开发中,我们经常会面对一个让人头疼的问题:按钮被用户点击了两次以上,导致出现重复提交表单或者发送重复的请求。这个问题常见而且恼人。为了解决这个问题,我们需要一个又简单又实用的方法,可以在不搞乱原有代码的情况下,有效地防止按钮被连续点

    2024年02月03日
    浏览(47)
  • vue uniapp 防止按钮多次点击(类似于防抖节流)

    common文件并创建anti-shake.js文件 man.js文件中引入 页面里使用即可 不传参,直接传一个方法就行 带参数,传一个方法和一个参数就行 

    2024年02月11日
    浏览(37)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包