手动实现h5移动端点击全屏按钮横屏展示图片，左右滑动切换,处理页面会随着手指滑动问题

页面提供全屏按钮,全屏展示的容器

<div class="container">
	<button @click="openSwiper">点击全屏查看</button>
	
	 <!-- 大图 -->
	<div
		class="full"
		v-if="showSwiper"
		@touchstart="handleTouchStart"
		@touchmove="handleTouchMove"
		@touchend="handleTouchEnd"
		>
		<img :src="currentItem.imageUrl" alt="" />
	</div>
</div>

在data中定义需要的数据

  data() {
    return {
      imgList: [],//接口获取的图片列表
      currentIndex: 0,//当前展示的图片index
      currentItem: {},//当前展示的图片本身
      showSwiper: false,//控制大图展示与否
      startY: 0, // 触摸开始时的Y坐标
      currentY: 0, // 触摸移动时的Y坐标
      threshold: 50, // 触发滑动的阈值
    };
  },

在methods中定义实现的函数

    openSwiper() {
      this.showSwiper = true;
    },
     handleTouchStart(event) {
      this.startY = event.touches[0].clientY;
      this.currentY = this.startY;
    },
    handleTouchMove(event) {
      this.currentY = event.touches[0].clientY;
    },
    handleTouchEnd() {
      const distance = this.currentY - this.startY;
      if (Math.abs(distance) > this.threshold) {
        if (distance < 0) {
          // 左滑
          if (this.currentIndex === this.imgList.length - 1) {
            this.currentIndex = 0;
          } else {
            this.currentIndex += 1;
          }
        } else {
          // 右滑
          if (this.currentIndex === 0) {
            this.currentIndex = this.imgList.length - 1;
          } else {
            this.currentIndex -= 1;
          }
        }
        this.currentItem = this.imgList[this.currentIndex];
      }
    },

样式


  .full {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #fff;
    z-index: 99;
    display: flex;
    justify-content: center;
    align-items: center;

    img {
      width: 100%;
      transform: rotate(90deg) scale(1.5) translate(0, 3vw);  //图片旋转90度,缩放,平移位置
    }
  }