前言
小程序是直面用户便捷的应用，而在用户使用时往往都会涉及到关键节点的按钮点击，例如，注册登录时，页面跳转时，发送验证码时，付钱还款，弹出提示等等。。。如果没有控制好按钮重复点击的问题，那么影响用户体验。当然有时候也会被同行吐槽，这人不行。。。
一、为什么会发生重复点击
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>
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>
扫描二维码关注公众号，回复：
15848190 查看本文章
4、toast提示
只需用到uni api 就可以实现更多用法可以参考文档
uni.showToast({
title: '点击'
})
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、将用户点击反馈和按钮禁用结合使用
总结
如有问题欢迎指出，如果有其他办法欢迎评论指导学习。