【微信小程序】滑动验证

此代码只是一种模板代码，样式丑陋，但是功能完善。需要使用的朋友自己修改样式代码和部分参数达到自己需求！

此代码用到的组件是微信小程序的 movable-area 和 movable-view ; 使用简单效果强大省去很多繁琐操作！

下边大家看效果图：

直接上代码：

wxml:

<movable-area class="content" style="width:{{area_width}}%">
  <movable-view class='box' style='width:{{box_width}}rpx' friction="{{100}}" direction="horizontal" x="{{x}}" damping="{{500}}" bindchange="drag" bindtouchend="dragOver">
  </movable-view>
</movable-area>

wxss:

.content{
  margin: 0 auto;
  margin-top: 200rpx;
  height: 80rpx;
  border: 1rpx solid #ddd;
}
.box{
  /* width: 120rpx; */
  height: 80rpx;
  background-color: orange;
}

js:

var coord=0;
Page({

  /**
   * 页面的初始数据
   */
  data: {
    x:0,
    area_width:95,   //可滑动区域的宽，单位是百分比，设置好后自动居中
    box_width:120,   //滑块的宽,单位是 rpx
    maxNum:0,        //验证成功时的坐标，不需要设置，代码自动计算；
  },
  drag(e){
    var that = this;
    coord = e.detail.x;
  },
  dragOver(e){
    var that = this;
    if(coord>=that.data.maxNum){
      wx.showToast({
        title: '验证成功',
        icon: 'success',
        duration: 2000
      })
      //验证成功之后的代码
    }else{
      that.setData({
        x:0,
      })
    }
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (e) {
    var that = this;
    wx.getSystemInfo({
      success: function (res) {
        console.log(res.windowWidth);
        var n = Math.floor(res.windowWidth * that.data.area_width / 100-that.data.box_width/2)
        that.setData({
          maxNum:n,
        })
      }
    })
  },

})

全自动代码，无脑操作，希望能帮到在座的各位！~