moveable-view滑动验证

Moveable-view 滑动验证是一种常见的人机验证方式，其原理是通过用户在屏幕上滑动 Moveable-view 组件来完成验证，以确认用户是真人而不是机器人。

具体实现步骤如下：

1. 在页面中添加一个 Moveable-view 组件，并设置其样式和位置。

2. 监听 Moveable-view 组件的 touchstart，touchmove 和 touchend 事件，以获取用户滑动时的手指位置信息。

3. 根据用户滑动的距离和方向，判断是否完成验证。

4. 验证成功后，执行相应的操作，如提交表单等。

下面是一个简单的示例代码：

<view class="moveable-view">
  <moveable-view class="inner-view" direction="horizontal" bindtouchstart="onTouchStart" bindtouchmove="onTouchMove" bindtouchend="onTouchEnd">
    <image src="https://xxx.com/slider.png"></image>
  </moveable-view>
</view>

.moveable-view {
  width: 300rpx;
  height: 150rpx;
  position: relative;
}
.inner-view {
  width: 150rpx;
  height: 150rpx;
  position: absolute;
  top: 0;
  left: 0;
}

Page({
  data: {
    startX: 0,
    moveX: 0,
    success: false
  },
  onTouchStart: function (e) {
    this.setData({
      startX: e.touches[0].clientX
    })
  },
  onTouchMove: function (e) {
    this.setData({
      moveX: e.touches[0].clientX - this.data.startX
    })
  },
  onTouchEnd: function () {
    if (this.data.moveX >= 150) {
      this.setData({
        success: true
      })
      // 验证成功，执行相应的操作
    } else {
      this.setData({
        moveX: 0
      })
      // 验证失败，重置状态
    }
  }
})

在这个示例中，我们通过监听 Moveable-view 组件的 touchstart，touchmove 和 touchend 事件，获取用户滑动的手指位置信息，并根据滑动距离和方向来判断是否完成验证。如果滑动距离超过 150rpx（即图片的宽度），则认为验证成功。否则，我们将滑块重置为初始状态，等待用户重新滑动。