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

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

下一篇博客会重点说一下这个问题的解决方式。

>

如果在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分别对应显示。

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/334902.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

java bytebuffer 大小_java – 为什么DirectByteBuffer.array()有额外的大小?

我的代码是:if (frameRGBABuffer null) {frameRGBABuffer ByteBuffer.allocateDirect(cameraHeight * cameraWidth * 4).order(ByteOrder.nativeOrder());}Log.d("tag",frameRGBABuffer.array().length)我的相机分辨率是1280720,因此frameRGBABuffer应该…

关于登录 token 的设计

设计要点: APP 和 小程序 的登录 token 不需要时效性,PC端的登录 token 需要时效性token 中不要加入到期时间,因为每次有效请求,都要更新 token 的到期时间, 如果把到期时间加入到 token 中,那么每次请求就…

aws高额账单_取消堆放以提高延迟并减少AWS账单

aws高额账单大多数性能问题可以通过几种不同的方式解决。 多数人都容易理解和应用许多适用的解决方案。 一些解决方案(例如从JVM管理的堆中删除某些数据结构)更加复杂。 因此,如果您不熟悉此概念,我建议您继续学习我们最近如何减少…

丢弃commit_git丢弃本地修改的所有文件(新增、删除、修改)

一,未使用 git add 缓存代码时。可以使用 git checkout -- filepathname (比如: git checkout -- readme.md ,不要忘记中间的 “--” ,不写就成了检出分支了!!)。放弃所有的文件修改可以使用 git checkout …

Iphone 手机如何导入/导出通讯录

打开苹果云官网,选择「通讯录」,点击左下角的「设置」,可以看到导入/导出菜单 点击进入 icloud 官网

php通过ajax下载文件,通过ajax调用php下载文件

我有一个按钮,点击它会调用ajax函数。这是我的ajax功能function csv(){ajaxRequest ajax();//ajax() is function that has all the XML HTTP Requestspostdata "data" document.getElementById("id").value;ajaxRequest.onreadystatechange…

intellij远程调试_IntelliJ中的远程调试Wildfly应用程序

intellij远程调试远程调试Java应用程序意味着使用本地开发环境连接到远程运行的应用程序。 Java开箱即-agentlib:jdwp[options]支持远程调试:目标应用程序必须使用-agentlib:jdwp[options]选项执行, -agentlib:jdwp[options]选项加​​载Java调试线协议&…

oracle 取系统当前年份_Oracle 获取当前日期及日期格式

Oracle 获取当前日期及日期格式获取系统日期: SYSDATE()格式化日期: TO_CHAR(SYSDATE(),YY/MM/DD HH24:MI:SS)或 TO_DATE(SYSDATE(),YY/MM/DD HH24:MI:SS)格式化数字: TO_NUMBER注: TO_CHAR 把日期或数字转换为字符串T…

php thread linux,Linux_linux内核函数kernel_thread,设备驱动程序中,如果需要几 - phpStudy...

linux内核函数kernel_thread设备驱动程序中,如果需要几个并发执行的人物,可以启动内核线程,启动内和县城的函数为:int kernel_thread (int ( * fn )( void * ), void * arg, unsigned long flags);kernel_thread函数的作用是产生一个新的线程…

ljc.framework_Java 9模块系统(拼图)@ LJC的HackTheTower

ljc.framework今天,我们花了半天时间参加了第一次HackTheTower活动。 伦敦的Java用户组(aka LJC )的成员应邀在伦敦市的SalesForceTower(aka Heron Tower )26楼聚会。 Heather VanCura是Java社区流程的主席 马尼萨卡…

微信小程序注册/登录接口开发

文章目录后端有关说明前端有关说明接口设计小程序注册/登录接口APP 注册/登录接口PC Web 端的注册/登录接口小程序注册/登录序列图校验 token后端有关说明 登录和注册的逻辑要独立抽取写成2个接口:注册接口、登录接口 小程序、APP、PC端的登录接口和注册接口要分开…

php中符号 的作用是什么意思,PHP中@符号的用途是什么?

PHP支持错误控制运算符&#xff0c;即at符号()。当放在表达式之前时&#xff0c;该表达式可能生成的任何错误消息都将被忽略。要在PHP中使用符号&#xff0c;代码如下-示例<?php $file file (non_existent_file) ordie ("Failed in opening the file: Error Message …

couchbase_使用Portworx和Couchbase的有状态容器

couchbase容器本应是短暂的&#xff0c;因此可以很好地扩展以用于无状态应用程序。 有状态的容器&#xff08;例如Couchbase&#xff09;需要区别对待。 管理Docker容器的持久性概述了如何管理有状态容器的持久性。 该博客将说明如何使用Docker Volume Plugins和Portworx创建有…

jpa获取数据库当前时间_SpringDataJPA存储数据时通过注解自动设置创建时间和修改时间...

如果我们此时是通过 Spring Data JPA进行数据库的操作&#xff0c;Spring Data JAP提供了Auditing特性&#xff0c;我们可以通过起很好的实现我们的需求。其原因基本时通过插入监听器&#xff0c;当我们对被特定注解的数据bean进行操作时&#xff0c;其在中间自动进行一系列的操…

在 MyEclipse 中配置 tomcat

在 IDE 配置 tomcat 实则就是让 IDE 来管理 tomcat 配置 步骤 1 点击工具栏上的“Run/Stop/Restart MyEclipse Servers”图标旁边的下拉箭头 步骤 2 选择“Configure Server” 步骤 3 在弹出的对话框“Preferences”中展开“MyEclipse” – “Servers” – “Tomcat”–“To…

finalizer_Java Finalizer和Java文件输入/输出流

finalizer在与主题直接合作或花时间学习它们之后&#xff0c;我经常会发现自己在网上注意到更多主题。 最近的Stephen Connolly &#xff08; CloudBees &#xff09;发表了FileInputStream / FileOutputStream被认为有害的文章&#xff0c;引起了我的注意&#xff0c;因为我最…

unity 陶瓷质感_一种基于Unity3D的虚拟陶瓷设计方法与流程

本发明涉及虚拟现实领域&#xff0c;特别涉及一种基于Unity3D的虚拟陶瓷设计方法。背景技术&#xff1a;陶艺工艺制作环境要求严格&#xff1a;不仅在拉坯成型需要利用旋转机器&#xff0c;在烧制过程则需要窑炉锻造&#xff0c;如何将陶瓷制作工艺与虚拟现实开发完美结合在一起…

java 中怎么加汉字,jquery怎么向body里面增加文字

jquery如何向里面增加文字jsp代码是这样的&#xff1a;我想在页面加载时动态的将一行文字增加到里面&#xff0c;不知道为什么总是加不进去&#xff0c;js代码如下&#xff1a;$(document).ready(function(){if($("#type").val()"MESSAGE") {$(".ke-t…

MacBook 推出移动硬盘时总是提示有程序在使用它,如何解决?

如下图所示&#xff1a; 先使用命令 df -lh 在终端查看当前系统的所有硬盘&#xff0c;命令如下&#xff1a; liaowenxiongliaowenxiongdeMacBook-Air ~ % df -lh Filesystem Size Used Avail Capacity iused ifree %iused Mounted on /dev/disk1s5s1 234Gi…

m_map投影_MATLAB使用m_map工具箱演示绘制m_map logo

第二&#xff0c;新建脚本(CtrlN)&#xff0c;输入如下代码&#xff1a;close all; clear all; clcm_proj(ortho,lat,45,long,-95);m_coast(color,[0,1,0],linewidth,5);m_coast(patch,r);m_grid(linestyle,:,xticklabels,[],yticklabels,[]);patch(0.5*[-1,1,1,-1],0.25*[1,1,…