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

微信小程序简单滑动解锁

效果


通过 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 小时前
隐私计算技术全景:从联邦学习到可信执行环境的实战指南—数据安全——隐私计算 联邦学习 多方安全计算 可信执行环境 差分隐私
人工智能·安全·数据安全·tee·联邦学习·差分隐私·隐私计算
旺仔Sec3 小时前
新疆维吾尔自治区第一届“丝路杯”网络安全大赛暨2026年新疆职业院校技能大赛网络安全赛项竞赛样题
安全·web安全
我不是QI4 小时前
DES 加密算法:核心组件、加解密流程与安全特性
经验分享·算法·安全·网络安全·密码学
毛毛三由4 小时前
【uniapp】微信小程序修改按钮样式
微信小程序·小程序·uni-app
三翼鸟数字化技术团队6 小时前
本地开发环境获取远程App端环境-研发提效小技巧
websocket·微信小程序
知识分享小能手8 小时前
微信小程序入门学习教程,从入门到精通,项目实战:美妆商城小程序 —— 知识点详解与案例代码 (18)
前端·学习·react.js·微信小程序·小程序·vue·前端技术
xiejava10189 小时前
开源安全管理平台wazuh-非法可疑进程检测
安全·开源·wazuh
你的电影很有趣12 小时前
lesson72:Node.js 安全实战:Crypto-Js 4.2.0 与 Express 加密体系构建指南
javascript·安全·node.js
Giser探索家13 小时前
遥感卫星升轨 / 降轨技术解析:对图像光照、对比度的影响及工程化应用
大数据·人工智能·算法·安全·计算机视觉·分类
全栈工程师修炼日记13 小时前
ARMv8系统的安全性(二):TrustZone架构如何重塑移动设备安全生态
安全