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

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

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

　　　　代码地址：https://github.com/dreamITGirl/vuepageturn  //demo

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

 

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

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

                 不管是用v-touch还是用js原生，都会出现这个问题，在实现上下页面滑动切换时，采用了纯css去控制上下滑动的距离。所以，cs