vue实现上下滑动翻页_基于vue实现上下滑动翻页效果
项目简述
在18年底的时候，一直致力于制作年度报告的H5页面。为了项目的需求，开发出上下滑动翻转的功能。且上翻页面的比例需相应缩减一定的比例。
效果类似于http://www.17sucai.com/pins/demo-show?id=7834
该链接使用jquery技术开发完成；我的功能与之具有类似的效果，并采用了vue框架进行开发。
该项目主要依赖以下插件：其中上下滑动翻页功能采用了v-touch技术，并基于hammer.js实现了对Vue组件的支持。如果不采用该插件，则可以通过直接调用触控事件处理函数来实现类似效果。
现在总结一下几点，是我在写代码的时候遇到的坑。
一、关于滑动插件的坑
由于我在开发过程中选择了vTouch技术及其相关的pan属性及其配套功能与事件处理机制进行实现。因此，在组件内部若存在滑动区域将会导致css样式冲突的问题（若组件内部仍存在滑动区域，则会导致样式冲突），直至发布前仍未彻底解决。
- 无论采用v-touch还是纯js实现方式，在实现页面切换操作时都会遇到此问题。通过纯css控制上下的滑动幅度，并因此可能引发css冲突问题。为了避免在使用v-touch或js原生滚动区域内再次嵌入滚动条而造成潜在的问题，请避免在使用v-touch或js原生滚动区域内再次嵌入滚动条。后续博客将深入探讨这一问题的解决方案。
@panstart.prevent="panStart"
@panmove.prevent="panMove"
@panend.prevent="panEnd">
:key="index" :is="val"
:style="{
zIndex:zIndex(index),
transition:all ${transition(index)}s,
transform:translateY(${top(index)}) scale3d(${scale(index)},1,${scale(index)})
}"
复制代码
二、滚动距离的计算
看图理解
页面1、2、3各自对应我要上下滑动切换的三个页面；此外，
每个页面都是一个独立的组件。
换句话说，
这些组件通过v-for循环渲染。
需要调节的是每个页面的top值、z-index值、scale值以及以实现视觉效果切换的时间
当用户向上（下）滚动屏幕时, 组件索引3（组件索引1）变为当前显示的内容, 上一（下一）个分页内容变为上一（下一）个分页内容, 这是因为组件索引3（组件索引1）已经是最后一个分页内容, 用户无法继续下滑. 因此, 在处理panmove与panend事件时, 我们可以根据当前index值以及组件数组中的最后一项与第一项来判断相应的操作.
在执行panmove操作时，请详细说明滚动过程中页面的变化情况以及top值与滑动距离的计算原理。具体来说，请查看图示：
最难以理解的是这个上滑或下滑的距离，在我的代码中，在1.0版本中并未解决两个页面始终存在一段距离的问题。这一段距离相当于distance的三分之二，在panend时，请检查用户滑动的距离是否足以触发翻页。如果这一段距离很小，则不能翻页，请添加一个判断逻辑以确保正确性。在1.1版本中去除了component在循环渲染时设置top属性的行为，在此之后就不会产生上述页面间距问题了。
当进行上拉操作时（也就是向上滑动）, 现在处于其他位置的是网页1, 而当前处于前一个位置的是网页2, 当前处于当前位置的是网页3. 对于这三个网页而言, 每个都向上移动了一个屏幕的高度. 然而, 网页3的top值设置为0, 网页2的top值被设置为-1倍屏幕高度.
位置相对于屏幕而言下降了两倍；然而从页面1的角度看，则显示的是其他图片的内容；因此它的高度计算为（其索引减去当前索引）乘以屏幕的高度。
针对当前页面缩放问题的解决办法是，在panstart事件触发时将当前页面的比例因子初始化为1；在panmove事件中根据滑动距离随机调整比例因子；当在panend事件中设置一个延迟时间间隔使其逐渐趋近于1。
所以，正常的滑动过程中的样式是
我们可以从GitHub平台获取代码。如果不使用v-touch的方式，则可以通过触发start（touchStart）、触发电动（touchMove）以及触发电停（touchEnd）来实现显示效果。