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

微信小程序简单滑动解锁

效果


通过 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);
};
相关推荐
铲子Zzz5 小时前
Java使用接口AES进行加密+微信小程序接收解密
java·开发语言·微信小程序
小安运维日记5 小时前
CKS认证 | Day4 最小化微服务漏洞
安全·docker·微服务·云原生·容器·kubernetes
Bruce_Liuxiaowei6 小时前
安全分析:Zabbix 路径探测请求解析
安全·网络安全·zabbix
weixin_472339467 小时前
网络安全核心技术解析:权限提升(Privilege Escalation)攻防全景
安全·web安全
武汉唯众智创7 小时前
高职院校“赛岗课”一体化网络安全实战类人才培养方案
网络·安全·web安全·网络安全·“赛岗课”一体化·赛岗课
比奥利奥还傲.7 小时前
Linux运维安全新范式:基于TCPIP与SSH密钥的无密码认证实战
linux·运维·安全
亿.69 小时前
【Java安全】RMI基础
java·安全·ctf·rmi
weixin_4723394612 小时前
网络安全之XSS漏洞:原理、危害与防御实践
安全·web安全·xss
春哥的研究所12 小时前
AI人工智能名片小程序源码系统,名片小程序+分销商城+AI客服,包含完整搭建教程
人工智能·微信小程序·小程序
Bruce_Json14 小时前
微信小程序ts+sassjlin-ui
微信小程序·小程序·sass