小程序自定义纯前端滑动图片校验

小程序自定义纯前端滑动图片校验

根据[微信小程序滑动验证拼图（有效果图）] 修改完成的，为了改变频繁操作dome造成的卡顿使用了movable-area组件，没有使用canvas组件（主要是不太会）(=1001.2101.3001.6650.1&utm_medium=distribute.-task-blog-2~default~_search_link&depth_1-utm_source=distribute.-task-blog-2~default~_search_link)

JS部分

Page({data: {imgList: ['.jpg','.jpg','.jpg','.jpg','.jpg','.jpg','.jpg','.jpg'],slidebel:false,//滑动弹窗canfile_image:'',//正在使用的图片canfile_x:'',//x返回 60 至 240 之间的数canfile_y:'',//y返回 0 至 50 之间的数slide_clientX:0,//移动位置slide_status:0,//0 停止操作   1 触发长按   2 正确   3 错误initX: 0},// 弹窗visidlisd(e){this.setData({slidebel:!this.data.slidebel})if(this.data.slidebel){this.slide_tap()}},pxToRpx(px){return px * 750 / wx.getSystemInfoSync().windowWidth;},// 画布slide_tap(e){var that = thislet imgList = that.data.imgListlet canfile_index = und(Math.random() * 8) // 0 - 8that.setData({slide_clientX: 0,initX: 0,canfile_x: that.und(Math.random() * 130 + 60)),canfile_y: that.und(Math.random() * 54)),canfile_image: imgList[canfile_index]})},// 滑动开始的变化中bindchangeSku(e){this.setData({slide_clientX: this.pxToRpx(e.detail.x) > 500 ? 500 : this.pxToRpx(e.detail.x)})},// 滑动开始slide_start(e){this.setData({slide_status:1})},//滑动结束slide_chend(e){var that = thisvar cliextX;if(that.data.slide_clientX < 1){that.data.slide_status = 0return false}if(that.data.slide_clientX > 500){cliextX = 500}else{cliextX = that.data.slide_clientX}if(((that.data.canfile_x + 10) > cliextX) && ((that.data.canfile_x - 10) < cliextX)){// 正确that.setData({slide_status:2,slide_clientX:that.data.canfile_x,})setTimeout(function () {that.setData({slidebel:false,})},1000)}else{// 错误that.setData({slide_status:3,})}setTimeout(function () {that.setData({slide_status:0,initX: 0,slide_clientX:0,})},1200)},
})

WXML部分

<button bindtap="visidlisd">滑动验证</button>
<!-- 滑动验证弹窗 -->
<view class="slide_model" wx:if="{{slidebel}}"><view><movable-area class="canvas_img" style="width: 600rpx;height: 336rpx;"><image src="{{canfile_image}}" style="width: 600rpx;height: 336rpx;"></image><movable-view direction="all" damping="100" style="width: 100rpx;height:100rpx" disabled x="{{canfile_x + 'rpx'}}"y="{{canfile_y + 'rpx'}}"><view class="canvas_view"></view></movable-view><movable-view direction="all" damping="100" disabled x="{{slide_clientX + 'rpx'}}" y="{{canfile_y + 'rpx'}}"><view class="canfile_image"style="background-image: url({{canfile_image}});background-size: 600rpx 336rpx; background-position: -{{canfile_x}}rpx -{{canfile_y}}rpx;"></view></movable-view></movable-area><movable-area class="canvas_slide"><view class="canvas_width"style="width:600rpx;{{slide_status == 1?'background:#d1e9fe;border-color:#1991fa':''}}{{slide_status == 2?'background:#d2f4ef;border-color:#52ccba;color:#52ccba':''}}{{slide_status == 3?'background:#fce1e1;border-color:#f57a7a;color:#f57a7a':''}}"><view>{{slide_status == 0 ? '拖动左边滑块完成上方拼图' : slide_status == 2 ? '验证成功' : slide_status == 3 ? '验证失败' : ''}}</view></view><movable-view direction="horizontal" damping="100" x="{{initX}}" bindtouchstart="slide_start" bindtouchend="slide_chend"bindchange="bindchangeSku"><view class="canvas_kus" wx:if="{{slide_status < 2}}"style="{{slide_status > 0?'background:#1991fa;border-color:#1991fa;color:#ffffff':''}}"><van-icon name="down" class="arrowIconRight" /></view></movable-view></movable-area><!-- <view class="canvas_guil"><view bindtap="visidlisd" class="cuIcon-roundclose">关闭</view><view bindtap="slide_tap" class="cuIcon-refresh">刷新</view></view> --></view>
</view>

WXSS部分

/* 滑动验证 */
.slide_model {width: 100%;padding-top: 20vh;height: 80vh;z-index: 10;position: fixed;left: 0;top: 0;background: rgba(0, 0, 0, 0.4);display: flex;align-items: flex-start;justify-content: center;
}.slide_model>view {float: left;z-index: 1;position: relative;width: calc(600rpx + 60rpx);background-color: #fff;border-radius: 10rpx;
}#firstCanvas {z-index: 1 !important;
}.canvas_img {width: 600rpx;height: 336rpx;position: relative;margin: 30rpx 30rpx 0;
}.canvas_view {width: 100rpx;height: 100rpx;position: absolute;background: #fff;opacity: 0.4;box-shadow:inset 2px 2px 5px rgb(29, 28, 28);z-index: 0;
}
.canfile_image {width: 100rpx;height: 100rpx;position: absolute;left: 0;z-index: 3;box-shadow: 0px 2rpx 54rpx rgba(0, 0, 0, 0.2);
}.canvas_kus {border-radius: 4rpx;width: 80rpx;height: 80rpx;background-color: #fff;font-size: 36rpx;font-weight: 700;position: absolute;left: 0;top: 0;border: 2rpx solid #ddd;color: #45494c;line-height: 90rpx;text-align: center;transition: 0.1s all linear;
}.arrowIconRight{transform: rotate(-90deg);font-weight: 600;
}.canvas_width {position: absolute;left: 0;top: 0;height: 80rpx;background-color: #f7f9fa;width: 0;border: 1px solid #e4e7eb;line-height: 80rpx;text-align: center;font-size: 32rpx;color: #45494c;border-radius: 4rpx;
}.cuIcon-back_android {transform: rotate(180deg);
}.canvas_slide {width: 540rpx;height: 86rpx;margin: 30rpx;position: relative;
}.canvas_guil {width: 100%;border-top: 1px solid #f4f4f4;height: 100rpx;display: flex;align-items: center;float: left;font-size: 46rpx;color: #666;
}.canvas_guil>view {margin-left: 30rpx;
}