微信小程序实现滑动验证拼图
本文实例为大家分享了微信小程序实现滑动验证拼图的具体代码，供大家参考，具体内容如下
效果图
.wxml
<button bindtap="visidlisd">滑动验证</button>
<!-- 滑动验证弹窗 -->
<view class="slide_model" wx:if="{{slidebel}}">
<view>
<view class="canvas_img">
<canvas wx:if="{{!canfile_image}}" style="width: 300px; height: 104px;" canvas-id="firstCanvas"></canvas>
<image wx:if="{{canfile_image}}" class="canvas_srinl" src="/images/slideimage_{{canfile_index}}.jpg"></image>
<view class="canvas_view" style="left:{{canfile_x}}px;top:{{canfile_y}}px;"></view>
<image class="canfile_image" style="top:{{canfile_y}}px;left:{{slide_clientX > 250 ? 250 : slide_clientX}}px;" src="{{canfile_image}}"></image>
</view>
<view class="canvas_slide">
<view class="canvas_width" style="width:{{slide_clientX > 260?260:slide_clientX}}px;{{slide_status == 2?'background:#52CCBA;':''}}{{slide_status == 3?'background:#F57A7A;':''}}"></view>
<view class="canvas_kus" bindtouchstart="slide_start" bindtouchmove="slide_hmove" bindtouchend="slide_chend"
style="left:{{slide_clientX > 260?260: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}}" class="cuIcon-back_android"></view>
<view wx:if="{{slide_status == 2}}" class="cuIcon-check"></view>
<view wx:if="{{slide_status == 3}}" class="cuIcon-close"></view>
</view>
<view wx:if="{{slide_status == 0}}">拖动左边滑块完成上方拼图</view>
</view>
<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%;height: 100vh;z-index: 10;position: fixed;left: 0;top: 0;background:rgba(0, 0, 0, 0.4);display: flex;align-items: center;justify-content: center;}
.slide_model>view{float: left;z-index: 1;position: relative;width: calc(300px + 60rpx);background-color: #fff;}
.canvas_img{width: 300px;height: 104px;position: relative;float: left;margin: 30rpx 30rpx 0;}
.canvas_view{width: 50px;height: 50px;position: absolute;background:#fff;z-index: 2;}
.canfile_image{width: 50px;height: 50px;position: absolute;left: 0;z-index: 3;box-shadow: 0px 1px 27px rgba(0, 0, 0, 0.2);}
.canvas_kus{width: 40px;height: 40px;background-color: #fff;font-size: 36rpx;font-weight: 700;position: absolute;left: 0;top: 0;border: 1px solid #ddd;color: #fff;}
.canvas_srinl{width: 300px;height: 104px;}
.canvas_width{position: absolute;left: 0;top: 0;height:40px;background-color: #1991FA;width: 0;border-top: 1px solid #ddd;border-bottom: 1px solid #ddd;}
.cuIcon-back_android{transform:rotate(180deg);}
.canvas_slide{width: 300px;height: 40px;background:#eee;text-align: center;padding-left: 50rpx;line-height: 80rpx;float: left;margin: 30rpx;position: relative;font-size: 26rpx;}
.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;}
.js
Page({
data: {
slidebel:false,//滑动弹窗
canfile_image:'',//裁剪图片
canfile_index:'',//图片返回 1 至 3 之间的数
canfile_x:'',//x返回 60 至 240 之间的数
canfile_y:'',//y返回 0 至 50 之间的数
slide_clientX:0,//移动位置
slide_status:0,//0 停止操作 1 触发长按 2 正确 3 错误
},
// 弹窗
visidlisd(e){
this.setData({
slidebel:!this.data.slidebel
})
if(this.data.slidebel){
this.slide_tap()
}
},
// 画布
slide_tap(e){
var that = this
that.setData({
canfile_index:Math.round(Math.random() * 2 + 1),
canfile_x:Math.round(Math.random() * 180 + 60),
canfile_y:Math.round(Math.random() * 54),
canfile_image:''
})
clearTimeout(that.data.timeoutID)
that.data.timeoutID = setTimeout(function () {
var context = wx.createCanvasContext('firstCanvas')
context.width = 300
context.height = 104
context.drawImage('/images/slideimage_'+that.data.canfile_index+'.jpg',0,0,context.width,context.height)
context.draw(true,(()=>{
wx.canvasToTempFilePath({
x: that.data.canfile_x,
y: that.data.canfile_y,
width:50,
height:50,
canvasId: 'firstCanvas',
success: function (res) {
that.setData({
canfile_image:res.tempFilePath
})
}
});
}))
},300)
},
// 滑动开始
slide_start(e){
this.setData({
slide_status:1
})
},
// 滑动中
slide_hmove(e){
this.setData({
slide_clientX:(e.touches[0].clientX - 60) < 1 ? 0 : (e.touches[0].clientX - 60)
})
},
//滑动结束
slide_chend(e){
var that = this
var cliextX;
if(that.data.slide_clientX < 1){
that.data.slide_status = 0
return false
}
if(that.data.slide_clientX > 240){
cliextX = 240
}else{
cliextX = that.data.slide_clientX
}
if(((that.data.canfile_x + 5) > cliextX) && ((that.data.canfile_x - 5) < cliextX)){
that.setData({
slide_status:2,
slide_clientX:that.data.canfile_x,
})
setTimeout(function () {
that.setData({
slidebel:false,
})
},1500)
}else{
that.setData({
slide_status:3,
})
}
setTimeout(function () {
that.setData({
slide_status:0,
slide_clientX:0,
})
},1500)
},
})
