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

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

在data中定义需要的数据

  data() {return {imgList: [],//接口获取的图片列表currentIndex: 0,//当前展示的图片indexcurrentItem: {},//当前展示的图片本身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度,缩放,平移位置}}

最终实现效果

可以横屏状态下左右滑动切换图片

手机端滑动查看时发现,元素会随着手指滑动方向移动

解决方案

页面根元素上添加touch-action: none;

.container{touch-action: none;
}