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

W.Y.B.G2025-01-06 14:10

微信小程序简单滑动解锁

效果

通过 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);
};