移动滑动切换功能总结

实现移动端的触摸滑动事件，主要有以下几个步骤：利用touchmove添加滑动事件，滑动的计算规则，滑动动画

一.添加滑动事件

常用的三个触摸事件是 touchstart ，touchmove ，touchend，手指在屏幕中划过时会依次会触发。（当仅发生touchstart 与 touchend 事件即为点击事件）

其中：

touchstart： 表示手指刚触摸屏幕即触发事件

touchmove ：表示当手指划过屏幕时会持续触发该事件

touchend： 表示当手指离开屏幕时会触发该事件

event对象属性：

（注：event.changedTouches指触摸时的相对位置， 其中screenX为 用户屏幕水平偏移量 ，screenY为 用户屏幕垂直偏移量 ，clientX 为相对浏览器的水平偏移量， clientX 为相对浏览器的垂直偏移量，坐标原点分别为屏幕左上角，浏览器的左上角）

（注： event.preventDefault()这个方法表示放弃了这个事件的其他功能包括滑动，点击行为）

1、事件的添加：

手指在屏幕上移动会依次经过三个过程，触碰屏幕（touchstart ），移动（touchmove ），离开屏幕（touchend），如果要进行左右滑动组件切换，就要知道手指滑动轨迹，因此需要标记手指触碰位置（startX，startY）和移动的位置（endX，endY），可以通过

2、 左右滑动计算规则：

为了避免手指不经意轻移屏幕便切换组件的问题，可以通过添加滑动计算规则解决这个问题，规则：

1>、 通常情况会以横向位移与纵向位移比例大于1.2时进行左右切换操作，当位移为正则表示向右滑动，位移为负表示向左滑动，当水平位移绝对值大于50为切换标准。

2>、不影响上下滑动加载的效果，需要进行判断，当达到左右切换的条件时进行左右切换， 添加event,preventDefault，否则不 添加event,preventDefault

注：

为什么要在touchmove中添加event,preventDefault?

因为移动设备本身就有默认的滚屏，当操作dom利用 touchmove事件，实现滑动，在这个过程中滑动的操作可能会引起手机上浏览器屏幕的滚动，因此添加 event,preventDefault 可以阻止默认滚动，因此希望实现一个既可以左右滑动切换又可以上下滚动的效果需要进行标记判断当前行为，如果是左右滑动则禁止默认滑动，添加 event,preventDefault ，如果是上下滑动则允许默认滑动。

如何使滑动事件不影响点击事件的触发？

因为移动端触发click事件，表示只触发了 touchstart,touchend事件，因此touchstart事件中不可以阻止事件默认行为，即添加 event,preventDefault。

let touchMove() => { /* 手指滑动切换效果 */

let startX, endX, startY, endY, slideX ;/* 初始水平位置，结束水平位置，初始垂直位置，结束垂直位置 ,是否水平滑动*/

const _self = this;

A.addEventListener('touchstart',(e) => { /* 手指刚触碰屏幕时触发 */

startX = e.changedTouches[0].screenX;

startY = e.changedTouches[0].screenY;

});

A.addEventListener('touchmove',(e) => { /* 手指在屏幕滑动时触发 */

endX = e.changedTouches[0].screenX;

endY = e.changedTouches[0].screenY;

_self.slideX = true;

slideX = _self.computeRule(startX, startY, endX, endY);

if(_self.slideX){

e.preventDefault();

}

})

},

let computeRule() => { /* 规则计算 */

const _self = this;

let slideX = true;

let distanceX = endX-startX;

let distanceY = Math.abs(endY-startY);

if( distanceY != 0 ){

if( Math.abs(distanceX/distanceY) > 1.2 ){

if(distanceX > 50){

/* 右滑事件 */

slideX = true;

}else if(distanceX < -50){

/* 左滑事件 */

slideX = true;

}

}else{ /* 不发生左右滑动事件 */

slideX = false;

}

return slideX;

}

三、滑动动画

利用vue组件过渡动画，vue提供了transition的封装，进行组件动画过渡（vue动画传送门： https://cn.vuejs.org/v2/guide/transitions.html）

html:

<transition name="slide-fade">

<router-view></router-view>

</transition>

Css:

.slide-fade-enter-active {

transition: all .3s ease;

}

.slide-fade-leave-active {

transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);

}

.slide-fade-enter, .slide-fade-leave-to{

transform: translateX(10px);

opacity: 0;

}