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去控制上下滑动的距离。所以，css可能会冲突。所以，建议不要在使用v-touch或者js原生滚动区域内部再次出现滚动区域。
下一篇博客会重点说一下这个问题的解决方式。
<v-touch class="container" @panstart.prevent="panStart" @panmove.prevent="panMove" @panend.prevent="panEnd"> <component v-for="(val,index) in componentList" :key="index" :is="val" :style="{ zIndex:zIndex(index), top:top(index), transition:`all ${transition(index)}s`, transform:`translateY(${top(index)}) scale3d(${scale(index)},1,${scale(index)})` }" ></component> </v-touch>
如果在component中仍有滑动的区域的话，就会产生css冲突。
2、滚动距离的计算
看图理解
页面1，页面2，页面3分别对应我要上下滑动切换的页面，并且，1，2，3分别对应组件中的三个组件，也就是说，每个页面都是一个独立的组件。而这些组件是通过v-for的方式循环渲染的。
需要控制的是每个页面的top值，z-index值，scale值，以及为了实现平滑的效果transition的过渡时间。
当页面向上（下）滑动时，页面3（页面1）就变成了当前展示的页面，页面2就变成了前一个页面（下一个页面），因为页面3（页面1）是最后（第）一个页面了，用户不能再继续向下滑，
所以，我们需要在panmove和panend时去依据当前的index值和当前展示的组件数组中最后一项和第一项去判断
重点说一下在panmove的时候，也就是在滚动过程中的时候，页面的变化以及top值和滑动的距离是如何计算的。还是看图：
这个里面最难理解的就是这个上滑，或者下滑的距离，在我的代码里，1.0版本的并没有解决两个页面始终差一段距离，这个距离就是distance的2/3，在panend的时候，我们需要看一下用户滑动的距离是不是可以翻页，如果距离很小，则不能翻页，最好加一下判断。
上滑之后，页面1就变成了其他页面，页面2变成了前一个页面，页面3变成了当前页面，对这3个页面来说，它们各向上走了一个屏幕的高度，而页面3的高度top值变成了0，页面2变成了-1*屏幕的高度。页面1则变成了-2 * 屏幕的高度，但是对于页面1来说，已经变成了其他的图片，所以它的高度，是（它的index-当前的index）*屏幕的高度。
对于当前上滑（下滑）的页面缩放的解决，是在panstart的时候，设置当前页面的缩放率为1，在panmove的时候根据滑动的距离，随机设置缩放率。在panend的时候，设置延迟，使缩放率变成。
所以，正常的滑动过程中的样式是
具体的代码，大家可以去github上自行下载使用，如果不使用v-touch,也可以用touchStart,touchMove,touchEnd分别对应显示。