<button bindtap="visidlisd">滑動(dòng)驗(yàn)證</button>
<!-- 滑動(dòng)驗(yàn)證彈窗 -->
<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}}">拖動(dòng)左邊滑塊完成上方拼圖</view>
?? ??? ?</view>
?? ??? ?<view class="canvas_guil">
?? ??? ??? ?<view bindtap="visidlisd" class="cuIcon-roundclose"></view>
?? ??? ??? ?<view bindtap="slide_tap" class="cuIcon-refresh"></view>
?? ??? ?</view>
?? ?</view>
</view>

/* 滑動(dòng)驗(yàn)證 */
.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;}

Page({
? data: {
? ? slidebel:false,//滑動(dòng)彈窗
? ? canfile_image:'',//裁剪圖片
? ? canfile_index:'',//圖片返回 1 至 3 之間的數(shù)
? ? canfile_x:'',//x返回 60 至 240 之間的數(shù)
? ? canfile_y:'',//y返回 0 至 50 之間的數(shù)
? ? slide_clientX:0,//移動(dòng)位置
? ? slide_status:0,//0 停止操作 ? 1 觸發(fā)長(zhǎng)按 ? 2 正確 ? 3 錯(cuò)誤
? },
? // 彈窗
? 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)
? },
? // 滑動(dòng)開(kāi)始
? slide_start(e){
? ? this.setData({
? ? ? slide_status:1
? ? })
? },
? // 滑動(dòng)中
? slide_hmove(e){
? ? this.setData({
? ? ? slide_clientX:(e.touches[0].clientX - 60) < 1 ? 0 : (e.touches[0].clientX - 60)
? ? })
? },
? //滑動(dòng)結(jié)束
? 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)
? },
})