Swiper在移动端的用法

代码在这里：戳我

1. 说明

父容器overflow:hidden;，子页面transform:translateX(-100%);width:100%;

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 左移，反之，右移）

重置位移

2.4 滑动结束(onTouchEnd)

前置工作：

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

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

判断是否是tap事件

判断方向

执行动画

后置工作:

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

总结

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

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

相关推荐：

微信小程序tab和swiper结合效果的实现

vue swiper实现组件化开发详解

swiper使用方法详解

以上就是Swiper在移动端的用法的详细内容，更多请关注Gxl网其它相关文章！