vue检测页面手指滑动距离，执行回调函数，使用混入的语法，多个组件都可以使用

// 创建一个Vue混入
export const slideTouchMixin = {
  data() {
    return {
      startX: 0, // 触摸开始的X坐标
      endX: 0, // 触摸结束的X坐标
      threshold: 50, // 滑动的最小距离
    };
  },
  methods: {
    // 触摸开始事件
    touchStart(e) {
      this.startX = e.touches[0].clientX;
    },
    // 触摸结束事件
    touchEnd(e) {
      this.endX = e.changedTouches[0].clientX;
      // 计算滑动的距离
      const distance = this.endX - this.startX;
      // 如果滑动距离大于阈值，执行回调函数
      if (Math.abs(distance) > this.threshold) {
        // 根据滑动方向判断是左滑还是右滑
        if (distance > 0) {
          // 左滑
          this.swipeLeft();
        } else {
          // 右滑
          this.swipeRight();
        }
      }
    },
    // 左滑时的回调函数
    swipeLeft() {
      console.log('左滑');
      // 这里可以添加你的左滑逻辑
    },
    // 右滑时的回调函数
    swipeRight() {
      console.log('右滑');
      // 这里可以添加你的右滑逻辑
    }
  },
  mounted() {
    // 添加触摸事件监听
    this.$el.addEventListener('touchstart', this.touchStart);
    this.$el.addEventListener('touchend', this.touchEnd);
  },
  beforeDestroy() {
    // 移除触摸事件监听
    this.$el.removeEventListener('touchstart', this.touchStart);
    this.$el.removeEventListener('touchend', this.touchEnd);
  }
};
 
// 在Vue组件中使用混入
export default {
  mixins: [slideTouchMixin],
  // 组件的其余部分...
};

这段代码定义了一个名为slideTouchMixin的Vue混入，它包含了检测页面手指滑动距离的逻辑。任何使用这个混入的Vue组件都能够在用户进行滑动操作时，根据滑动方向执行相应的回调函数。这个例子展示了如何创建可复用的代码，并且如何在Vue组件中使用混入。