vue实现手机端，手势切换左右滑动的功能

最新推荐文章于 2023-08-26 13:58:08 发布

咸鱼打工人

最新推荐文章于 2023-08-26 13:58:08 发布

阅读量3.6k

点赞数

CC 4.0 BY-SA版权

分类专栏： js 文章标签： html5 css javascript

本文链接：https://blog.csdn.net/weixin_42285167/article/details/120836258

js 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了如何在手机应用中通过原生js和Vue实现图片预览功能，利用touchstart、touchmove和touchend事件监听用户的左右滑动操作，实现图片无缝切换。还提及了解决浏览器被动事件监听冲突的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

背景：

需要在手机端实现图片预览，同时支持用户手势左右滑动时，图片可以进行切换查看。

技术实现：

实现思路事件主要是参照屏幕的触摸事件：touchstart、touchmove和touchend。

事件简要介绍：

touchstart 主要指手指触摸屏幕时触发事件，即使已经有手指在屏幕上也会触发。
touchmove 主要指手指在屏幕滑动时触发事件。
touchend 主要指手指从屏幕时移开时触发事件。

代码实现：

事件绑定：

原生js绑定：
    document.addEventListener('touchstart',movestartMeth, false);  
    document.addEventListener('touchmove',touchMoveMeth, false);  
    document.addEventListener('touchend',touchendMeth, false);
vue方式绑定：
<div v-if='showImageFlag' id="myModal" class="image-modal">
	<a class="image-download":href="showImageSrc" download>图片下载</a>
	<span class="image-close image-cursor" @click="closeImageModal">&times;</span>
	<div class="image-modal-content"  @touchstart="movestartMeth" @touchend="touchendMeth">
	<div class="image-mySlides">
	   <div class="image-numbertext">{{curimageindex}}/{{showImageDetailList.length}}</div>
	       <img ref="imgview" :src="showImageSrc"  @click='showImage()'>
		</div>
    <a class="image-prev" @click.prevent="plusSlides(-1)">&#10094;</a>
	<a class="image-next" @click.prevent="plusSlides(1)">&#10095;</a>
</div>

方法实现：

movestart:function(event){
    let touchS = event.targetTouches[0];
     // touches数组对象获得屏幕上所有的touch，取第一个touch
　　this.startPos = {
		x:touchS.pageX,
	    y:touchS.pageY
	}; // 取第一个touch的坐标值
},
moveend:function(event){
   // touches数组对象获得屏幕上所有的touch，取第一个touch
   let touchEnd = event.changedTouches[0]; 
   let touchX = touchEnd.pageX- this.startPos.x;
   let self = this
   // 设置滑动距离的参考值
	var d = 50;
	if(Math.abs(touchX)>d){
	   if(touchX>0){
		    //console.log('向左滑动');
		    self.plusSlides(-1);
		}else{
			//console.log('向右滑动');
			self.plusSlides(1);
		}
    }
},

注意事项：浏览器可能会如下错误

[Intervention] Unable to preventDefault inside passive event listener due to target being treated as passive.

解决方式：

在style全局样式添加* {touch-action: pan-y;}， pan-y表示启用单指垂直平移手势(上下滑动事件)。