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

微信小程序简单滑动解锁

效果


通过 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);
};
相关推荐
自由鬼1 小时前
正向代理服务器Squid:功能、架构、部署与应用深度解析
java·运维·服务器·程序人生·安全·架构·代理
dingzd953 小时前
了解去中心化金融在现代经济中的作用——安全交易新时代
安全·金融·web3·去中心化·facebook·tiktok·instagram
weixin_472339463 小时前
网络安全基石:从弱口令治理到动态防御体系的构建
安全·web安全
代码改变世界ctw3 小时前
1.4 ARM安全参考架构(PSA Certified)
arm开发·安全·arm·trustzone·atf·optee·安全启动
Ama_tor5 小时前
mini-program01の系统认识微信小程序开发
微信小程序·小程序
网安小白的进阶之路9 小时前
A模块 系统与网络安全 第四门课 弹性交换网络-2
网络·安全·web安全·系统安全·交换机
安全系统学习9 小时前
网络安全之RCE分析与利用详情
服务器·网络·安全·web安全·系统安全
武汉唯众智创9 小时前
网络安全实训室建设方案全攻略
网络·安全·web安全·网络安全·网络安全实训室·网络安全实验室
weixin_472339469 小时前
网络安全攻防:文件上传漏洞的深度解析与防御实践
安全·web安全
雪兽软件9 小时前
2025 年网络安全与人工智能发展趋势
人工智能·安全·web安全