基于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来实现也是能够的;

 

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

             一、由于我是使用的是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), transition:`all ${transition(index)}s`, transform:`translateY(${top(index)}) scale3d(${scale(index)},1,${scale(index)})` }"
                        
            ></component>  
              
   </v-touch>

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

　　　  二、滚动距离的计算

　　　　　　看图理解

　　　　　　　

　　　　　　　　　页面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分别对应显示。

 　　　　　　更新：1.1版本中删掉了component循环渲染时的top属性，这样，在上滑下滑的时候，就不会出现中间的距离差，只会按照js控制达到的样式距离走。