uniapp 用view组件作为按钮 防止重复点击 我的实现方法
用两个相同的view，未点击时，显示第一个隐藏第二个；点击后，隐藏第一个显示第二个，任务处理完成后恢复初始状态
1、先在<template>中创建两个相同的view
<view class="btnbox" @click.stop="requestPayment()" v-show="gopay">
<text class="btntxt">去支付</text>
</view>
<view class="btnbox" v-show="!gopay">
<text class="btntxt">支付中 请稍后。。。</text>
</view>
2、在中定义gopay变量并赋初值
export default { data() { return { gopay:true,//支付按钮显示开关，避免重复点击 } }, }
3、在requestPayment()开始时改变gopay=false,处理完成后改变gopay=true
async requestPayment() { this.gopay=false;//隐藏支付按钮 //TODO } uni.requestPayment({ }, fail: (e) => { }, complete: () => { this.gopay=true;//支付完成后打开支付开关 } }) },
4、<style>中
.btnbox{ width: 98%; height: 7vh; display: flex; flex-direction: column; justify-content: center; align-items: center; border-radius: 8px; background-color: #66CDAA; }