1、swiperAction.vue

<template>
  <!-- 滑动手势组件 -->
  <!-- 1 slot插槽 -->
  <!-- 2 向父组件传递滑动方向 -->
  <view @touchstart="handleTouchStart" @touchend="handleTouchEnd">
    <slot></slot>
  </view>
</template>

<script>
/**
 * 1 给容器绑定两个触屏事件 touchstart 和touchend
 * 2 用户按下屏幕事件
 *  1 记录用户按下屏幕事件 Date.now() 时间戳 返回1970-1-1到现在的毫秒数
 *  2 记录用户按下屏幕的坐标 event.changedTouches[0].clientX 和 clientY
 * 3 用户手指离开屏幕事件
 *  1 记录用户手指离开屏幕的时间 Date.now()
 *  2 记录用户手指离开屏幕的坐标
 *  3 根据按下和离开的时间 运算 判断 用户按下屏幕时长是否合法
 *  4 根据按下和离开的坐标 判断距离是否合法 判断滑动方向
 */
export default {
  data() {
    return {
      // 按下时间
      starTime: 0,
      // 按下坐标
      startX: 0,
      startY: 0
    }
  },
  methods: {
    //  手指按下屏幕
    handleTouchStart(event) {
      this.startTime = Date.now()
      this.startX = event.changedTouches[0].clientX
      this.startY = event.changedTouches[0].clientY
    },
    // 手指离开屏幕
    handleTouchEnd(event) {
      const endTime = Date.now()
      const endX = event.changedTouches[0].clientX
      const endY = event.changedTouches[0].clientY

      // 判断时长
      if (endTime - this.startTime > 2000) {
        return
      }
      let direction = ''
      // 判断用户滑动距离绝对值是否合法，合法：判断滑动方向
      if (
        Math.abs(endX - this.startX) > 10 &&
        Math.abs(endY - this.startY) < 10
      ) {
        direction = endX - this.startX > 0 ? 'right' : 'left'
      } else {
        return
      }

      this.$emit('swiperaction', { direction })
    }
  }
}
</script>

2、使用

<swiper-action @swiperaction="handleSwiperAction">
      <view class="high-img">
        <image :src="imgDetail.thumb" mode="widthFix"></image>
      </view>
    </swiper-action>

 // 手指左右滑动事件
    handleSwiperAction(params) {
      // 判断 imgIndex 是否超出数组范围
      // params.direction为left，imgIndex++，
      // params.direction === "left" && this.imgIndex < imgList.length-1
      // params.direction为right，imgIndex--
      // params.direction === "right" && this.imgIndex > 0
      const { imgList } = getApp().globalData
      if (params.direction === 'left' && this.imgIndex < imgList.length - 1) {
        this.imgIndex++
        this.getData()
      } else if (params.direction === 'right' && this.imgIndex > 0) {
        this.imgIndex--
        this.getData()
      } else {
        uni.showToast({
          title: '没有更多了~',
          icon: 'none'
        })
      }
    },