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

最新推荐文章于 2025-03-07 16:36:47 发布

weixin_34194551

最新推荐文章于 2025-03-07 16:36:47 发布

阅读量8.4k

点赞数 1

文章标签： javascript 前端大数据 ViewUI

原文链接：https://juejin.im/post/5c3bc56b51882522c03e819e

版权

本文介绍如何使用Vue和v-touch插件实现H5页面上下滑动翻页效果，包括解决滑动插件冲突、计算滚动距离、控制页面缩放和平滑过渡等关键问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

项目简述

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

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

代码地址：github.com/dreamITGirl… //demo

我的另一博客地址:www.cnblogs.com/bllx/p/1026…

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

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

一、关于滑动插件的坑

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

2、不管是用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>
复制代码

二、滚动距离的计算

看图理解

页面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.1版本中，删掉了component在循环渲染时的top属性，这样，就不会产生1.0版本的距离差问题。

上滑之后，页面1就变成了其他页面，页面2变成了前一个页面，页面3变成了当前页面，对这3个页面来说，它们各向上走了一个屏幕的高度，而页面3的高度top值变成了0，页面2变成了-1 *屏幕的高度。页面1则变成了-2 *屏幕的高度，但是对于页面1来说，已经变成了其他的图片，所以它的高度，是（它的index-当前的index）*屏幕的高度。

对于当前上滑（下滑）的页面缩放的解决，是在panstart的时候，设置当前页面的缩放率为1，在panmove的时候根据滑动的距离，随机设置缩放率。在panend的时候，设置延迟，使缩放率变成。

所以，正常的滑动过程中的样式是

具体的代码，大家可以去github上自行下载使用，如果不使用v-touch,也可以用touchStart,touchMove,touchEnd分别对应显示。

转载于:https://juejin.im/post/5c3bc56b51882522c03e819e