微信小程序滑动解锁、滑动验证

微信小程序简单滑动解锁

效果


通过 movable-view (可移动的视图容器,在页面中可以拖拽滑动)实现的简单微信小程序滑动验证

movable-view 官方说明:https://developers.weixin.qq.com/miniprogram/dev/component/movable-view.html

html 代码部分

html 复制代码
<view class="slide-code">
						<movable-area class="movable-p" :style="{ background: '#e8e8e8' }">
							<movable-view
								class="movable-view"
								:x="slideCodeX"
								y="0"
								:inertia="true"
								direction="horizontal"
								:disable-momentum="true"
								@change="movableChange"
								:disabled="slideCodeSuccess"
							>
								<!-- 滑动验证成功状态 -->
								<up-icon v-if="slideCodeSuccess" name="checkbox-mark" color="#30B36A" size="18"></up-icon>
								<!-- 滑动验证未成功状态 -->
								<up-icon v-else name="arrow-right-double" color="#ccc" size="18"></up-icon>
							</movable-view>
							<text class="slide-text" style="color: #fff" v-if="slideCodeSuccess">验证成功</text>
							<text class="slide-text" v-else>向右滑动完成验证</text>
						</movable-area>
					</view>

css 代码部分

css 复制代码
.slide-code {
	.movable-p {
		display: flex;
		justify-content: center;
		align-items: center;
		// width: v-bind(slideCodeWrapWidth);
		width: 100%;
		height: 80rpx;
		border-radius: 10rpx;
		box-shadow: 4px 2px 10px -2px rgba(211, 209, 209, 0.87);
		-webkit-box-shadow: 4px 2px 10px -2px rgba(211, 209, 209, 0.87);
		-moz-box-shadow: 4px 2px 10px -2px rgba(211, 209, 209, 0.87);
		overflow: hidden;
		&:before {
			content: '';
			position: absolute;
			width: v-bind(slideCodeBgWidth);
			height: 100%;
			top: 0;
			left: 0;
			background: #30b36a;
			border-radius: 10rpx;
		}
		.movable-view {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 40px;
			height: 100%;
			border-radius: 10rpx;
			background: #fff;
			z-index: 10;
		}
		.slide-text {
			z-index: 9;
		}
	}
}
.slide-code-close-btn {
	position: absolute;
	right: -20rpx;
	top: -80rpx;
}

js代码部分

js 复制代码
const movableChange = (e: any) => {
	var { x, y } = e.detail;

	// 设置滑动验证背景颜色
	slideCodeBgWidth.value = x + 10 + 'px';

	// 首先获取容器宽度
	uni.createSelectorQuery()
		.select('.slide-code')
		.boundingClientRect((res: any) => {
			slideCodeWidth.value = res.width;
		})
		.exec();

	uni.$u.debounce(() => {
		slideCodeX.value = x;
		if (slideCodeX.value == 0) return;
		if (slideCodeWidth.value == slideCodeX.value + 40) {
			// 验证成功
			slideCodeSuccess.value = true;
		} else {
			// 验证失败
			slideCodeSuccess.value = false;

			if (slideCodeX.value != 0) {
				uni.showToast({
					title: '验证失败',
					icon: 'none',
					mask: true
				});
			}
			nextTick(() => {
				slideCodeX.value = 0;
			});
		}
	}, 500);
};
相关推荐
Lz__Heng42 分钟前
信息安全工程师考点-网络安全法律与标准
安全·软考·信息安全工程师
独行soc5 小时前
2025年渗透测试面试题总结-67(题目+回答)
网络·python·安全·web安全·网络安全·adb·渗透测试
nodcloud6 小时前
点可云进销存商城如何部署在微信小程序
微信小程序·小程序
KKKlucifer10 小时前
国家网络安全通报中心:重点防范境外恶意网址和恶意 IP
tcp/ip·安全·web安全
wanhengidc11 小时前
手机云服务是什么意思?
运维·网络·安全·游戏·智能手机
TG_yilongcloud12 小时前
阿里云国际代理:怎么保障数据库在凭据变更过程中的安全与稳定?
数据库·安全·阿里云·云计算
JialBro12 小时前
S7-200 SMART PLC 安全全指南:配置、漏洞解析与复现防护
安全·plc·工控安全·西门子
ZeroNews内网穿透13 小时前
企业远程访问方案选择:何时选内网穿透,何时需要反向代理?
运维·服务器·网络·python·安全
lingggggaaaa14 小时前
小迪安全v2023学习笔记(八十二讲)—— Java组件安全&Solr&Shiro&Log4j&CVE复现
笔记·学习·安全
NiKo_W15 小时前
Git 版本回退与撤销修改
开发语言·git·安全