vue实现上下滑动翻页_基于vue实现上下滑动翻页效果

18年年底的时候，一直在做年度报告的H5页面，因为项目需要，需要实现上下滑动翻页，并且上滑的页面比正常页面的比例要缩小一定比例。

效果类似于http://www.17sucai.com/pins/demo-show?id=7834，这个链接是基于jquery实现的，我写的是和这个例子效果一样，只不过是用vue实现的。

首先介绍一下，这个项目依赖的插件：上下滑动翻页使用了v-touch，是基于hammer.js进行的vue封装。也可以不用这个插件写，直接用js原生，通过touchStart,touchMove,touchEnd来实现也是可以的;

现在总结一下几点，是我在写代码的时候遇到的坑。

1、因为我是使用的是v-touch里的pan属性及它附带的方法和事件。所以，在组件内部如果还有滚动的区域，就可能会出现冲突，最后项目上线之前，仍没有彻底解决。

不管是用v-touch还是用js原生，都会出现这个问题，在实现上下页面滑动切换时，采用了纯css去控制上下滑动的距离。所以，css可能会冲突。所以，建议不要在使用v-touch或者js原生滚动区域内部再次出现滚动区域。

下一篇博客会重点说一下这个问题的解决方式。

>

如果在component中仍有滑动的区域的话，就会产生css冲突。

2、滚动距离的计算

看图理解

页面1，页面2，页面3分别对应我要上下滑动切换的页面，并且，1，2，3分别对