vue实现滑动切换效果(仅在手机模式下可用)

本文的例子分享了vue实现滑动时红黄块左右滑动对应的距离，效果如下

实现过程主要在于实时跟踪手指滑动位置与原始位置的偏移，然后相应地移动红黄块。

红色和黄色区块的布局如下

Back包含两个块：back-l和back-r，为了隐藏其中一个，子模块需要将display:内嵌块和width:设置为100%。在父模块中设置了White-space: nowrap来处理两个子模块之间的空白。

模板lang=' html ' div class=' back ' @ touch start . prevent=' touch start ' @ touch move . prevent=' touch move ' @ touch end=' touch end ' ref=' back ' div class=' back-l ' ref=' left '/div class=' back-r ' ref=' right '/div/div/模板样式范围lang='stylus' rel='样式表/手写笔'。背面位置：固定宽度： 100%高度： 100像素白色空间：现在开始。背面-l位置：相对垂直对齐：顶部显示y:直列-块宽度： 100%高度： 100%背景色：红色。背面显示：内嵌块垂直对齐：顶部位置：相对宽度： 100%高度： 100%背景色：黄色/样式父模块监控滑动事件

有三个滑动事件：touchstart、touchmove、touchEnd，加上防止以避免页面的相应滑动。

在touchstart中记录滑动起点：

触摸开始(e) {const touch=e .触摸[0]这个。touch . startx=touch . page xthis . touch . starty=touch . pagey } touch move是一个滑动的过程，手指不会离开页面，因此离开页面时会触发touchend。在滑动过程中，当横向偏离位置大于纵向偏离位置时，认为滑动有效，记录手指偏离位置，相应移动红、黄块。

touch move(e){ console . log(' move ')；const touch=e . touch[0]//横向和纵向偏差位置为const deltax=touch . pagex-this . touch . startx const deltay=touch . pagey-this . touch . startif(math . ABS(deltay)math . ABS(deltax)){ return } const left=this . currentplay==' red '？0 :-window . inner width var offset with=math . min(0，math.max (-window.innerwidth，left deltax))//记录滑动距离占屏幕宽度的百分比。如果滑动太少，不要切换。percent=math . ABS(offset with/window . inner width)//移动红色和黄色块。$ refs . back . style[' transform ']=` translate 3d($ { offsetwithts } px，0，0)` //将动画时间设置为这个。$ refs.back.style ['过渡持续时间']=10}计算偏移量时，需要先知道当前的偏移量位置。如果当前在红色块中，则初始偏移为0，否则初始偏移为负屏幕宽度。首先，初始偏移加上横向偏移是最大值，window.innerWidth和-window.innerWidth是最左边的偏移。与0相比，它取最小值。如果偏移量为0或更大，它将不会移动(向右移动)，如果小于零，它可以向左移动。

最终效果在touchend中处理。如果滑动距离不大于某个值，就会恢复到原来的位置，否则就会切换。

TouchEnd(){ console . log(' end ')；console . log(this . percent)；Let offsetWidth让percent //当前为红色，如果滑动比大于0.1，则切换。否则，如果(这。currentplay===' red') {if (this。percent 0.1){这个。currentplay='黄色' offset with=-window . inner width } else { offset with=0 } } else {//当前为黄色。如果滑动比大于0.9，切换。否则，如果(这。百分比0.9){这个。current play=' red ' offset with=0 } else { offset with=-window。inner width } }//这里的变换是针对初始位置的。而不是移动过程中的位置。$ refs . back . style[' transform ']=` translate 3d($ { offsetwithts } px，0，0) ` this。$ refs.back.style ['过渡持续时间']=10}完整代码

模板lang=' html ' div class=' back ' @触摸开始。防止='触摸开始' @触摸移动。protect=' touch move ' @ touch end=' touch end ' ref=' back-l ' div class=' left '/div class=' back-r ' ref=' right '/div/div/template script export default { data(){ return { current play : ' red '，percenter : } }，created() { this.touch={}，methods : const touch=e . touch[0]const deltaX=touch。佩吉克斯-这个。触摸。startx const deltaY=touch。佩吉-这个。触摸。开始如果(数学。ABS(deltaY)数学。ABS(deltaX)){ return } const left=这个。currentplay==' red '？0 :-窗口。内部宽度变化偏移量=数学。min(0，Math.max(-window.innerWidth，left deltaX))这。百分比=数学。防抱死制动系统(车外/车窗)。内部宽度)这个.参考文献。回来。style[' transform ']=' translate 3d($ { offsetWidth } px，0，0)' this .参考文献。回来。style[' transitionDuration ']=10 }，TouchEnd(){ console。日志(' end ')；控制台。日志(这个。百分比)；让偏移量让百分比如果(这个。currentplay==' red '){ if(this。百分比0.1){这个。currentplay='黄色offsetwithts=-window。内部宽度} else { offsetidth=0 } } else { if(this。0.9%){这个。current play=' red ' offset with=0 } else { offset with=-window。内部宽度}这个.参考文献。回来。style[' transform ']=' translate 3d($ { offsetWidth } px，0，0)' this .参考文献。回来。style[' transitionDuration ']=10 } }/脚本样式作用域lang='铁笔' rel='样式表/手写笔' .背面位置：固定宽度： 100%高度： 100像素白色空间：现在开始。背面-我位置：相对垂直对齐：顶部显示：直列-块宽度： 100%高度： 100%背景-颜色：红色。背面显示：直列块垂直对齐：顶部位置：相对宽度： 100%高度： 100%背景色：黄色/样式以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。