微信小程序：点击登录判断有没有勾选协议，并出现抖动效果

不成为富婆不改名

于 2024-08-08 18:50:55 发布

阅读量193

点赞数 1

文章标签：微信小程序 notepad++ 小程序

本文链接：https://blog.csdn.net/qq_62442040/article/details/141033880

版权

1、首先需要些勾选的协议判断

Template：

<view style="display: flex;align-items: center;position: absolute;bottom: 30vh">
	<button style="width: 60vw;height: 80rpx;line-height: 80rpx;"  class="loginBtn" open-type="getPhoneNumber" @getphonenumber="getPhone">一键登录</button>
</view>
<view style="display: flex;position: absolute;bottom: 50rpx;width: 100%;justify-content: center;">
	<checkbox-group @change="checkboxChange">
		<view class="checkbox-container">
			<checkbox :checked="checked" class="small-checkbox"/>
		</view>
	</checkbox-group>
	<text class="btmTxt">已阅读并同意</text>
	<text class="btmTxt" style="color: #5298FF;" @click="viewPolicy('用户协议与隐私协议')">《用户协议与隐私协议》</text>
</view>

JS：

//记得data里面要写数据------这里就不展示了
checked: false, // 添加复选框状态
shaking: false, // 添加抖动状态



// 用户协议-----复选框状态改变
checkboxChange() {
	this.checked = !this.checked;
},
//点击一键登录
async getPhone(e) {
	if (!this.checked) {
		uni.showToast({
		    icon: "none",
			title: "请先阅读并同意《用户协议与隐私协议》"
		});
	    return;
	}
... ...

}

2、准备好了之后，准备抖动效果

第一步：哪里需要抖动，就在哪里添加一句 :class="{'shake': shaking}"

完整的template部分：

<view :class="{'shake': shaking}" style="display: flex;position: absolute;bottom: 50rpx;width: 100%;justify-content: center;">
	<checkbox-group @change="checkboxChange">
		<view class="checkbox-container">
			<checkbox :checked="checked" class="small-checkbox"/>
		</view>
	</checkbox-group>
	<text class="btmTxt">已阅读并同意</text>
	<text class="btmTxt" style="color: #5298FF;" @click="viewPolicy('用户协议与隐私协议')">《用户协议与隐私协议》</text>
</view>

第二步：点击一键登录之后，就开始判断，没有勾选就发生抖动

async getPhone(e) {
	if (!this.checked) {
		    this.shaking = true;
		    setTimeout(() => {
				this.shaking = false;
			}, 400);
			uni.showToast({
				icon: "none",
				title: "请先阅读并同意《用户协议与隐私协议》"
			});
		return;
	}
... ...
}

第三步：写抖动效果的样式

.shake {
			animation: shake 0.4s;
		}
@keyframes shake {
		    0%, 100% {
				transform: translateX(0);
			}
			10%, 90% {
				transform: translateX(-1px);
			}
			20%, 80% {
				transform: translateX(2px);
			}
			30%, 70% {
				transform: translateX(-4px);
			}
			40%, 60% {
				transform: translateX(4px);
			}
			50% {
				transform: translateX(-4px);
			}
		}

暂且先写到这里了