vue 手写移动端左右滑动防止上下滑动冲突超过宽度一半切换

原理是通过touchstart touchmove touchend三个事件配合transform属性实现

<div ref="mattersContent" @touchstart='touchStart' @touchmove='touchMove' @touchend='touchEnd' :style="{transform: 'translateX('+translateX+'px)',transition: transition+'s',white-space: 'nowrap'}"><div :style="{width:'100%',height:'200px'}">1111</div><div :style="{width:'100%',height:'200px'}">2222</div>
</div>

在touchstart事件中需要特别注意的是需要保存当前触发时的transform的值特别是translateX的值,因为不是每次触发按下事件都是没有进行滑动过的,只要进行了过滑动计算距离就不能单单是clientX距离页面的绝对距离了需要配合上上一次的transform才能实现正常的滑动

  data() {return {isFirst:false,x: 0,y: 0,_x: 0,_y: 0,translateX: 0,startTranslate:0,transition:0,},}methods: {touchStart(e) {// this.x  this.y 按下时 触点位置// transition每次点击时 清除过渡时间// this.startTranslate是当前按下时的translateX的值 需要这个变量的原因是可能当前位置是有过translate移动的 如果不加上相当于每次都是translateX(0)this.transition = 0this.x = e.touches[0].clientX;this.y = e.touches[0].clientY;console.log('touchStart',this.x,this.y)this.startTranslate = this.translateX},touchMove(e) {// this._x this._y 移动时 触点位置this._x = e.touches[0].clientXthis._y = e.touches[0].clientY// console.log('touchMove',this._x,this._x)// disY disX计算是不是左右滑动 let disY = Math.abs(this._y - this.y)let disX = Math.abs(this._x - this.x)if (this.isFirst) {this.isFirst = false;//判断方向if (disY > disX) {this.isHori = false;}if (disY < disX) {this.isHori = true;}}//判断方向 决定是否阻止默认行为if (this.isHori) {e.preventDefault();e.stopPropagation()} else {return;}// 每一次触发都要移动时间 就改变一次translate  this.translateX = this._x - this.x + this.startTranslate;// console.log('this.translateX = this._x - this.x + this.translateX;', this._x , this.x ,this.translateX,this._x - this.x + this.translateX)},touchEnd(e) {this.isFirst = trueif (!this.isHori) return;let mattersContentWidth = this.$refs.mattersContent.offsetWidth;if (e.changedTouches.length == 1) {this._x = e.changedTouches[0].clientX;// 移动时的x 减去 初始位置的x 就是移动的距离 负为左滑 正为右滑this.disX = this._x - this.x;console.log(this.disX, 'this.disX')// console.log((mattersContentWidth / 2), 'mattersContentWidth/2');// 只有滑动距离大于整个宽的一半距离才进行切换if (Math.abs(this.disX) > (mattersContentWidth / 2)) {if (this.disX < 0) {console.log('左滑',mattersContentWidth);// transform直接累加一个宽 这里需要注意根据自己能滑动的次数判断 如果多的话用累加 += 要设上边界值this.translateX = - mattersContentWidththis.transition = 0.2} else {console.log('右滑',this.startTranslate, mattersContentWidth,this.startTranslate + mattersContentWidth,this.startTranslate >= mattersContentWidth ? this.startTranslate - mattersContentWidth : 0);this.transition = 0.2// 右滑时 如果当前点下时保存的startTranslate大于宽说明可以右滑 否者说明已经是最边上了 直接为0this.translateX = Math.abs(this.startTranslate) >= mattersContentWidth ? this.startTranslate + mattersContentWidth : 0}} else{// 没有大于整个宽的一半 恢复按下时初始位置的startTranslateconsole.log('没有超过临结值 不变',this.startTranslate);this.transition = 0.2this.translateX = this.startTranslate}}}}

vue 手写移动端左右滑动防止上下滑动冲突超过宽度一半切换相关推荐

基于vue手写一个分屏器，通过鼠标控制屏幕宽度。
基于vue手写一个分屏器,通过鼠标控制屏幕宽度. 先来看看实现效果: QQ录屏20220403095856 下面是实现代码: <template><section class=&qu ...
vue手写一个计算器
计算器大家都不陌生有计算器机器有手机计算器网页计算器! 那么好今天我来给大家手写一个计算器啥都不说上操作请听题:vue手写计算器一个个小方块拼成一个计算器绿色比较好可以缓解视力哦 i ...
Vue手写一个日历组件
工作中遇到一个需求是根据日历查看某一天/某一周/某一月的睡眠报告,但是找了好多日历组件都不是很符合需求,只好自己手写一个日历组件,顺便记录一下. 先来看看设计图是什么样式, 跟其他日历有点不一样,这个 ...
vue 手写签名_签名模仿，把握好三个“度”！
有很多人问我,怎样才能快速模仿签名?特别是模仿出他人无法分辨的笔迹,今天教大家一招,您也可以笔迹模仿的!下面我来揭秘: 简单的说,签字模仿就要把握好三个"度"!即: 速度,角度,力 ...
vue 手写签名_与众不同的手写签批
随着移动互联网+时代的到来,手机成了我们日常生活中不可缺少的必备用品,它不仅仅是一个通讯工具,更是一台移动电脑.因此越来越多的单位把希望在手机上就能完成业务的处理,但也希望能还原线下办理的效果.因此, ...
vue手写列表竖向滚动
看看效果图最近由于项目需求,需要做一个列表的无线循环滚动,由于我们项目没有用UI库,所以手写了一个列表滚动,不过虽然网上很多,但还是想记录下来,话不多说了,上代码! 样式层 <template ...
vue 手写签名_用 Mac 制作手写签名，没打印机也能搞事
得益于基础设施进步,现在想搞点事,比以前快捷便利多了,线下能办的事儿一部分转到了线上,一人一机,操纵于千里. 开展业务,很多地方都会要求你提供签字授权,比如想给网站做个备案,或者想快速走个线上合同, ...
vue 手写签名_手写Promise/Promise.all/Promise.race（手写系列一）
背景几个月没写文章了,愧对关注本专栏的小伙伴.最近有同学提议我出一个手写系列的文章对常见对前端工具.框架.设计模式做一个覆盖.同时有个要求:代码要尽量短小易懂,并且体现原理,让学习者学习过后能在未来 ...
android 层叠轮播,vue手写一个卡片化层叠轮播（支持滑动，移动端连续滚动，点击）...
项目需求,需要写一个卡片化层叠的轮播,找了下插件都没有合适的,于是写了一个展示5个卡片的轮播先看效果图: 卡片化层叠轮播 5个卡片要计算各自的高度,宽度,利用相对定位计算出各自的位置然后trans ...

vue 手写移动端左右滑动防止上下滑动冲突超过宽度一半切换

vue 手写移动端左右滑动防止上下滑动冲突超过宽度一半切换相关推荐

最新文章

热门文章

vue 手写 移动端 左右滑动 防止上下滑动冲突 超过宽度一半切换

vue 手写 移动端 左右滑动 防止上下滑动冲突 超过宽度一半切换相关推荐

最新文章

热门文章

vue 手写移动端左右滑动防止上下滑动冲突超过宽度一半切换

vue 手写移动端左右滑动防止上下滑动冲突超过宽度一半切换相关推荐