movecar_wx/package-user/pages/slide-confirm/index.js

Component({
  properties: {
    width: {
      type: Number,
      value: 300
    },
    height: {
      type: Number,
      value: 80
    },
    blockSize: {
      type: Number,
      value: 76
    },
    defaultText: {
      type: String,
      value: "向右滑动完成验证"
    },
    successText: {
      type: String,
      value: "验证通过"
    },
    iconSize: {
      type: Number,
      value: 24
    }
  },

  data: {
    position: 0,          // 滑块位置
    progressWidth: 0,     // 已滑动宽度
    startX: 0,            // 触摸起始X坐标
    isMoving: false,      // 是否正在滑动
    isSuccess: false      // 是否验证成功
  },

  methods: {
    // 触摸开始
    onTouchStart(e) {
      if (this.data.isSuccess) return;
      
      this.setData({
        startX: e.touches[0].clientX,
        isMoving: true
      });
    },

    // 触摸移动
    onTouchMove(e) {
      if (!this.data.isMoving || this.data.isSuccess) return;
      
      const moveX = e.touches[0].clientX;
      let position = moveX - this.data.startX;
      
      // 限制滑块范围
      if (position < 0) position = 0;
      const maxPosition = this.data.width - this.data.blockSize;
      if (position > maxPosition) position = maxPosition;
      
      this.setData({
        position,
        progressWidth: position + this.data.blockSize  // 进度宽度 = 滑块位置 + 滑块宽度
      });
    },

    // 触摸结束
    onTouchEnd() {
      if (!this.data.isMoving || this.data.isSuccess) return;
      
      this.setData({ isMoving: false });
      
      // 判断是否滑动到终点
      const maxPosition = this.data.width - this.data.blockSize;
      if (this.data.position >= maxPosition * 0.95) {
        // 验证成功
        this.setData({
          position: maxPosition,
          progressWidth: this.data.width,
          isSuccess: true
        });
        // 触发成功事件
        this.triggerEvent('success');
      } else {
        // 滑动不足，重置
        this.setData({
          position: 0,
          progressWidth: 0
        });
      }
    },

    // 重置滑块
    reset() {
      this.setData({
        position: 0,
        progressWidth: 0,
        isSuccess: false
      });
    }
  }
});

// box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1) inset;

// transition: background-color 0.3s;