微信小程序滑块验证方法

<view class=“canvas_width”

style=“width:{ {slide_clientX > canvas_width-50?canvas_width-50:slide_clientX}}px;{ {slide_status == 2?‘background:#52CCBA;’:‘’}}{ {slide_status == 3?‘background:#F57A7A;’:‘’}}”>

<view class=“canvas_kus” bindtouchstart=“slide_start” bindtouchmove=“slide_hmove” bindtouchend=“slide_chend”

style=“left:{ {slide_clientX > canvas_width-50?canvas_width-50:slide_clientX}}px; { {slide_status == 0?‘color: #333;’:‘’}} { {slide_status == 1?‘background:#1991FA;’:‘’}} { {slide_status == 2?‘background:#52CCBA;’:‘’}} { {slide_status == 3?‘background:#F57A7A;’:‘’}}”>

<view wx:if=“{ {slide_status < 2}}”

style=“background-image: { {slide_status==0?‘url(/imgs/puzzle-uncheck.png)’:‘url(/imgs/puzzle-uncheck2.png)’}}”>

<image src=“/imgs/puzzle-checked.png” mode=“aspectFit”

style=“width:40rpx;height:40rpx;margin-top:10px;”>

<image src=“/imgs/puzzle-fail.png” mode=“aspectFit”

style=“width:40rpx;height:40rpx;margin-top:10px;”>

拖动左边滑块完成上方拼图

<image bindtap=“visidlisd” class=“footer-icon” src=“/imgs/puzzle-close.png”

style=“width: 50rpx; height: 50rpx;”>

<image bindtap=“slide_tap” class=“footer-icon” src=“/imgs/puzzle-fresh.png”

style=“width: 48rpx; height: 48rpx;”>

index.wxss

/* 拼图滑动验证 */

.slide_model {

width: 100%;

height: 100vh;

z-index: 999;

position: fixed;

left: 0;

top: 0;

background: rgba(0, 0, 0, 0.4);

display: flex;

align-items: center;

justify-content: center;

}

.slide_wrapper {

float: left;

z-index: 1;

position: relative;

width: 90%;

background-color: #fff;

}

.canvas_img {

width: 90%;

min-height: 150px;

position: relative;

margin: 25rpx auto 0;

}

#firstCanvas {

z-ind