最近在做移动端方面运用到了饿了么的vue前端组件库，因为不想单纯用组件而使用它，故想深入了解一下实现原理。本文主要为大家详细介绍了移动端效果之swiper的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能帮助到大家。

1. 说明

父容器:

子页面:

2. 核心解析

2.1 页面初始化

由于所有页面都在手机屏幕左侧一个屏幕宽度的位置，因此最开始的情况是页面中看不到任何一个子页面，所以第一步应该设置应该显示的子页面，默认情况下defaultIndex:0

2.2 容器滑动开始(onTouchStart)

在低版本的android手机上，设置event.preventDefault()会起到一定的性能提升作用，使得滑动起来不是那么卡。

前置工作：

• 如果用户设置了 prevent:true， 滑动时阻止默认行为
• 如果用户设置了stopPropagation:true， 滑动时阻止事件向上传播
• 如果动画尚未结束，阻止滑动
• 设置dragging:true，滑动开始
• 设置用户滚动为false

滑动开始：

使用一个全局对象记录信息，这些信息包括：

2.3 容器滑动(onTouchMove)

套用全局dragState，记录新的信息

那么我们就可以通过开始和滑动中的信息来计算出一些东西：

滑动的水平位移（offsetLeft = currentLeft – startLeft）

滑动的垂直位移（offsetTop = currentTopAbsolute – startTopAbsolute）

是否是用户的自然滚动，这里的自然滚动说的是用户并不是想滑动swiper，而是想滑动页面

判断是左移还是右移（offsetLeft < 0 左移，反之，右移）

重置位移

.4 滑动结束(onTouchEnd)

前置工作：

在滑动中，我们是可以实时地来判断到底是不是用户的自然滚动userScrolling，如果是用户自然滚动，那么swiper的滑动信息就不算数，因此要做一些清除操作：

当然如果userScrolling:false，那么就是滑动子页面，执行doOnTouchEnd方法

判断是否是tap事件

判断方向

执行动画

后置工作:

清除一次滑动周期中保存的状态信息

总结

整体来说实现原理还是比较简单的，滑动开始记录初始位置，计算上一页与下一页的应该展示的页面；滑动中计算位移，计算上一页下一页的位移；滑动结束根据位移结果执行相应的动画。

有一个细节就是，在滑动中transition的效果置为空，是为了防止在滑动中上一页与下一页因为过渡存在而位移得不自然，在滑动结束后再给他们加上动画效果。