背景：

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

技术实现：

实现思路事件主要是参照屏幕的触摸事件：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)">❮</a><a class="image-next" @click.prevent="plusSlides(1)">❯</a>
</div>

方法实现：

movestart:function(event){let touchS = event.targetTouches[0];// touches数组对象获得屏幕上所有的touch，取第一个touchthis.startPos = {x:touchS.pageX,y:touchS.pageY}; // 取第一个touch的坐标值
},
moveend:function(event){// touches数组对象获得屏幕上所有的touch，取第一个touchlet 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表示启用单指垂直平移手势(上下滑动事件)。

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

手机端带二级菜单滑动导航的实现
手机端带二级菜单滑动导航的实现实现的效果图: Swiper插件是开源.免费.强大的移动端触摸滑动插件.Swiper能实现触屏焦点图.触屏Tab切换.触屏多图切换等常用效果.这个效果是freemode ...
vue+weui 手机端项目
vue+weui 手机端项目俩个地址 https://weui.io/ https://github.com/Tencent/weui/wiki?tdsourcetag=s_pctim_aiomsg ...
thinkcmf5.1项目实现pc端和wap手机端自动切换
用thinkcmf5.1写项目的时候如何实现PC端和手机端自动切换? 1.首先找到data/config/template.php文件复制 'cmf_admin_default_theme' ...
vue 限制手机端访问
vue 限制手机端访问 APP.vue页面 mounted() {var str = navigator.userAgentvar ipad = str.match(/(iPad).*OS\s([\d ...
html禁止页面左右滑动,手机端禁止浏览器左右滑动
在手机端vue项目中,禁止页面左右滑动,代码直接写在index.html中 var startPos = 0,endPos = 0,isScrolling = 0; document.addEvent ...
vue页面手机端开发总结
当图片的某元素是一张图片,可不设置宽高,将样式设置为如下,这样图片就会撑起来页面,避免一些宽高在不同机型不协调的问题. display: block; width: 100%; 需要条件判断显示不同的 ...
vue 手机端路由切换滑动_vue移动端router-view嵌套实现底部导航切换
路由使用 vue-router 组件库使用 vue-ydui 效果图: 登录.png 主界面-首页.png 主界面-办事大厅.png 项目结构图片.png 大体流程图片.png 路由代码 impo ...
vue解决手机端上下不能滑动问题
解决:在vue中,我定义了最外层的div不能滑动,所以直接改这个地方就可以解决.
JS手机端touch事件计算滑动距离的方法
计算手势在手机屏幕上滑动时,手势滑动的距离,代码如下: function wetherScroll(){ var startX = startY = endX =endY =0; var body=d ...

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

背景：

技术实现：

代码实现：

事件绑定：

方法实现：

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

最新文章

热门文章