微信小程序拖动滑块验证

最新推荐文章于 2024-08-08 15:38:07 发布

M_SSY

最新推荐文章于 2024-08-08 15:38:07 发布

阅读量5.8k

点赞数 3

分类专栏：微信小程序

本文链接：https://blog.csdn.net/M_SSY/article/details/87719085

版权

微信小程序专栏收录该内容

9 篇文章 0 订阅

订阅专栏

index.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">
      <view class='movable-icon'></view>
    </movable-view>
  </movable-area>

index.wxss

.content{
  margin: 0 auto;
  margin-top: 200rpx;
  height: 90rpx;
  background: #ededed;
  color: #666;
  border-radius: 10px;
  display:flex;
  justify-content:center;
  align-items:center;
  font-size:16px;

}
.box{
  /* width: 120rpx; */
  height: 90rpx;
  background-color: #fc5b13;
  border-radius: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.movable-icon{
  width: 60rpx;
  height: 60rpx;
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAACVElEQVR4Xu3aLY/VQBTG8f8TVgErFk2wGDyCVbwm4PgQJDgQJKt2eRFkNyTgcXwGDLsECwaFIQGHIgENqEOadJPmht5OOzOlZ9ra3p47z29O78t0xMwPzTw/C8DSATMXWG6BmTfA8iG43AIht4CZPQAeA1+AO5I+hFy37jVmtgm8BC4DB5KexdYccn1nB5jZGeA7sFG/wR/gpqR3Q97w+BozewTsNmq8kHQ/puaQa0MALgCfVopHI5jZIXBtpe7oCCEAJ4BqsFWrNo8oBDO7Bbz+x6yNitAJUA3QzE4Cb4DtxAj3gOf/EyEIoGSEYIBSEXoBlIjQG6A0hEEAJSEMBigFIQqgBIRoAO8ISQA8IyQDyIywAzzN8YsxKYBHhOQA3hCyAHhCyAbgBSErgAeE7AANhGoJ7WLi9YTob4dRAGqE08DbFoRLkj4OWdMzszaEXUlPumqOBtCBcCjpRtdg2863IPwCzkn6sa7u2ABtS2tHkq4nBvgNnJX0cxIAHeuKOW6BPUnVs4y1xygdkHFRdfofglMOX7VG1g6YevisAB7CZwPwEj4LgKfwyQG8hU8KkDF81ueHSb4FvIZP0gGew0cDeA8fBVBC+MEApYQfBFBS+N4ApYXvBVBi+GCAUsP3Aai2s1Xb2prHPLbJmdl54HPK8PUC6RFwdaXuqHsEgzrAzLaAb8CperBRM38c2Mz2gIcNgNHDBwHUs3UbeAV8Be5Ket+12Nh1vrFZ+gqwP9nN0l1BvJ9P8m/QM8IC4Hn2Uox96YAUip5rLB3gefZSjH32HfAX1fX6UCbefU0AAAAASUVORK5CYII=) no-repeat center center;
  background-size: 100% 100%;
}

index.js

data里面:

    x: 0,
    area_width: 85,   //可滑动区域的宽，单位是百分比，设置好后自动居中
    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,
      })
    }
    console.log(this.data.x)
  },
  /**
   * 生命周期函数--监听页面加载
   */
  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,
        })
      }
    })
  },