【模仿】微信小程序滑动验证拼图（有效果图）

原文

wxml

<!-- 滑动验证弹窗 -->
<view class="slide_model" wx:if="{{slidebel}}">
  <view>
    <view class="slide_tips">
      <view class="flex">
        <view class="slide_text">请完成安全验证</view>
        <van-icon bindtap="slide_tap" class="icon_refresh" name="replay" style="transform:rotate(90deg)" />
      </view>
      <view bindtap="visidlisd" class="cuIcon-roundclose"><van-icon name="cross" /></view>
    </view>
    <view class="line"></view>
    <view class="canvas_img">
      <canvas wx:if="{{!canfile_image}}" style="width: 300px; height: 200px;" canvas-id="firstCanvas" id="firstCanvas"></canvas>
      <image wx:if="{{canfile_image}}" class="canvas_srinl" src="/images/slide/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">
          <van-icon name="arrow-left" />
        </view>
        <view wx:if="{{slide_status == 2}}" class="cuIcon-check">
          <van-icon name="success" />
        </view>
        <view wx:if="{{slide_status == 3}}" class="cuIcon-close">
          <van-icon name="cross" />
        </view>
      </view>
      <view wx:if="{{slide_status == 0}}">向右滑动完成验证</view>
    </view>
  </view>
</view>

js

    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 错误


  onLoad(options) {
      this.slide_tap()
    },
 // 弹窗
    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:''
      })
      setTimeout(function () {
        var context = wx.createCanvasContext('firstCanvas')
        context.width = 300
        context.height = 200
        context.drawImage('/images/slide/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
              })
            },
            fail: function(err) {
              console.log("err",err)
            }
          });
        }))
      },1000)
    },
  // 滑动开始
  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,
        })
      },1000)

/* 滑块 */
/* 滑动验证 */
.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_tips {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 30rpx;
}

.slide_text {
  font-size: 32rpx;
}

.line {
  border: 1rpx solid #e4e7eb;
  margin: 0 30rpx;
}

.slide_model>view {
  float: left;
  z-index: 1;
  position: relative;
  width: calc(300px + 60rpx);
  background-color: #fff;
}

#firstCanvas {
  z-index: 1 !important;
}

.icon_refresh {
  font-size: 36rpx;
  margin-left: 10rpx;
  font-size: 40rpx;
}

.flex {
  display: flex;
  align-items: center;
  justify-content: left;
}

.canvas_img {
  width: 300px;
  height:  200px;
  position: relative;
  float: left;
  margin: 30rpx 30rpx 0;
}

.cuIcon-refresh {
  position: absolute;
  top: 0;
  right: 0;
  padding: 10rpx 10rpx 0 0;
  font-size: 48rpx;
}

.canvas_view {
  width: 50px;
  height: 50px;
  position: absolute;
  background: #fff;
  z-index: 3;
}

/* .canvas_view:before{
  content: "";
  width: 1.8em;
  height: 1.8em;
  position: absolute;
  top: 2.2em;
  left: -.4em;
  border-radius: 50%;
  background-color: #fff;
} */

.canfile_image {
  width: 50px;
  height: 50px;
  position: absolute;
  left: 0;
  z-index: 4;
  box-shadow: 0px 1px 27px rgba(0, 0, 0, 0.2);
}

/* .canfile_image:before {
  content: "";
  width: 50%;
  height: 50%;
  position: absolute;
  top: 1em;
  left: -.8em;
  border-radius: 50%;
  background-color: #fff;
}
.canfile_image:after {
  content: "";
  width: 50%;
  height: 50%;
  position: absolute;
  top: 2em;
  left: 2em;
  border-radius: 50%;
  background-color: #fff;
} */
.canvas_srinl {
  width: 300px;
  height: 200px;
}

.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_width {
  position: absolute;
  left: 0;
  top: 0;
  height: 40px;
  background-color: #1991FA;
  /* background-color: #ffffff; */
  width: 0;
  border-top: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
}

.canvas_slide_fa {
  position: relative;
}

.canvas_slide_child {
  position: absolute;
  top: 0;
  z-index: 9;
  display: flex;
  align-items: center;
  justify-content: center;
  float: left;
}

.cuIcon-back_android {
  transform: rotate(180deg);
}

.canvas_slide {
  width: 85%;
  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;
}