此程式碼只是一種模板程式碼，樣式醜陋，但是功能完善。需要使用的朋友自己修改樣式程式碼和部分引數達到自己需求！

此程式碼用到的元件是微信小程式的 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,
        })
      }
    })
  },

})