<template>
  <view class="container" @touchstart="onTouchStart" @touchmove="onTouchMove" @touchend="onTouchEnd">
    <swiper class="swiper" indicator-dots="true" autoplay="true" interval="3000" duration="500">
      <swiper-item>
        1
      </swiper-item>
      <swiper-item>
        2
      </swiper-item>
      <swiper-item>
        3
      </swiper-item>
    </swiper>
  </view>
</template>

<script>
export default {
  data() {
    return {
      startX: 0,
      startY: 0,
      isDragging: false
    };
  },
  methods: {
    // 手指触摸开始
    onTouchStart(e) {
      this.startX = e.touches[0].clientX;
      this.startY = e.touches[0].clientY;
      this.isDragging = false;
    },
    // 手指滑动
    onTouchMove(e) {
      const moveX = e.touches[0].clientX - this.startX;
      const moveY = e.touches[0].clientY - this.startY;

      if (Math.abs(moveX) > Math.abs(moveY)) {
        // 横向滑动
        this.isDragging = true;
      } else {
        // 纵向滑动
        this.isDragging = true;
      }

      if (this.isDragging) {
        e.preventDefault(); // 防止页面默认滑动
      }
    },
    // 手指抬起
    onTouchEnd() {
      this.isDragging = false;
    }
  }
};
</script>

<style scoped>
.container {
  position: relative;
  width: 100%;
  height: 300px;
}

.swiper {
  width: 100%;
  height: 100%;
}
</style>
