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属性及它附带的方法和事件。所以，在组件内部如果还有滚动的区域，就可能会出现冲突(如果在component中仍有滑动的区域的话，就会产生css冲突)，最后项目上线之前，仍没有彻底解决。

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

@panstart.prevent="panStart"

@panmove.prevent="panMove"

@panend.prevent="panEnd">