微信小程序简单滑动解锁

效果

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

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

html 代码部分

<view class="slide-code"><movable-area class="movable-p" :style="{ background: '#e8e8e8' }"><movable-viewclass="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 代码部分

.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代码部分

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