微信小程序实现滑动验证拼图

本文实例为大家分享了微信小程序实现滑动验证拼图的具体代码，供大家参考，具体内容如下

效果图

.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 > 260260: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 > 260260: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)
 },
})

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持源码搜藏网。