vue图片时间轴滑动_vue时间轴风格式的图片展示

项目将近完结,在修正bug的同时,也对自己项目中代码进行回顾分析。

看回半年前写的东西,真是很多都感到陌生,所以趁着下午的空档时间总结下之前遇到的难点。

好的,先上图,目标效果

先分析

上下两层,上层样品轮播,下层层进式时间轴 + 小型样本展示,要注意的是上下两层的样品是有逻辑的,即点击下层小样品,上层样品会有响应

上下两个步进器,上层左右是会影响下层的,而下层时间轴横移不会影响上层

时间刻度,此处偷懒了下,我直接用了样品的时间,而不是等宽时间线

首先是上层的html代码

为左右步进器以及中间图片添加事件

然后是下层的html代码

{{item.time}}

{{item.title}}

为将要移动的div添加ref,样式为 position: relative; left: 0,同时为小样品的上下分流设好样式,ps:时间轴圆形节点要放在for循环里

方法代码

左移

handlePre() {

let left = parseInt(this.$refs.mytimeline.style.left);

if(left < (-220)){

this.$refs.mytimeline.style.left = left + 250 + 'px';

}

}

不为最左边的时候,可以左移,步进长度应为小样品长度再大一点

右移

handleNext() {

let left = parseInt(this.$refs.mytimeline.style.left);

if(left <= 20 && (left >= -650)){

this.$refs.mytimeline.style.left = left - 250 + 'px';

}

},

不为最右边时,可以右移,这里限制条件为总长度减去一个小样品的长度

成品展示

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

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

相关文章

用计算机录制一段30,测评!电脑录屏软件哪个好用?小白进阶第1阶段

原标题&#xff1a;测评&#xff01;电脑录屏软件哪个好用&#xff1f;小白进阶第1阶段电脑录屏软件哪个好用&#xff1f;最近短视频越来越火&#xff0c;小卓发现身边不少人都在捣鼓视频&#xff0c;有拍摄的有录屏的比比皆是。问了一下&#xff0c;大多是对此感兴趣的&#x…

quartz定时器依赖_JAVA使用quartz添加定时任务,并依赖注入对象操作

最近在写定时任务&#xff0c;以前没接触过。查了些相关资料说使用quartz定时框架。需要配置文件&#xff1a;config-quartz.xml相关配置如下(红色部分是之后添加的&#xff0c;在后面步骤会说明)&#xff1a;xsi:schemaLocation"http://www.springframework.org/schema/b…

计算机一级b需要学哪些,希望通过江苏省计算机一级B考试的同学千万要看哦!江苏省计算机一级B理论复习资料(绝密资料)...

省一级B理论49、算法的基本性质包括确定性、有穷性、能行性、输出、(输入)50、算法是问题求解规则的一种过程描述。51、用机器语言编写的程序在计算机上可直接运行52、求解可计算问题的程序框架都可用顺序、选择和重复三种控制成分来描述。53、程序设计语言可划分为机器语言、汇…

深信服上网行为管理开启snmp_编写SHELL脚本在CACTI中来实现监控深信服上网行为管理的CPU和内存使用情况...

一、深信服上网行为管理中的SNMP设置二、在CACTI中编写SHELL脚本如下&#xff1a;cpu oid: .1.3.6.1.4.1.35047.1.3内存 oid: .1.3.6.1.4.1.35047.1.4在线用户数oid: .1.3.6.1.4.1.35047.2.1.1.1.0会话数oid: .1.3.6.1.4.1.35047.2.1.1.6.0先编写监控CPU的脚本vim ac.sh#! /bin…

同一个网络中为什么有些计算机可以连接共享打印机,有些需要输入密码,安装局域网共享打印机时,要求输入用户和密码,但对方并没有设置,为什么?谢谢!!...

2006-07-20 回答有的需要&#xff0c;有的不需要如若不需要&#xff0c;则需&#xff1b;windows xp3方法&#xff1a;1、确保你装有打印机的电脑与其他需要打印的电脑已经联网(必须在同一个局域网中、具有相同的子网号和子网掩码)2、开启打印机和文件共享服务&#xff1a;在网…

centos路由查看命令_CentOS下使用Route命令添加路由

方法一添加路由&#xff1a;route add -net 192.168.0.0/24 gw 192.168.0.1route add -host 192.168.1.1 dev 192.168.0.1删除路由&#xff1a;route del -net 192.168.0.0/24 gw 192.168.0.1add 增加路由del 删除路由-net 设置到某个网段的路由-host 设置到某台主机的路由gw 出…

计算机科学与技术博士论文,计算机科学与技术系博士学位论文答辩.PDF

计算机科学与技术系博士学位论文答辩计算机科学与技术系计算机科学与技术系博士学位论文答辩博士学位论文答辩计算机科学与技术系计算机科学与技术系博士学位论文答辩博士学位论文答辩可满足性问题的算法设计与分析可满足性问题的算法设计与分析可满足性问题的算法设计与分析可…

dbscan算法python实现_挑子学习笔记:DBSCAN算法的python实现

DBSCAN(Density-Based Spatial Clustering of Applications with Noise)聚类算法&#xff0c;是一种基于高密度连通区域的、基于密度的聚类算法&#xff0c;能够将具有足够高密度的区域划分为簇(Cluster)&#xff0c;并在具有噪声的数据中发现任意形状的簇。DBSCAN算法通过距离…

计算机怎么应用最小二乘法作图,最小二乘法应用

最小二乘法的数据处理一、引言在实际的工程或者实验中&#xff0c;误差处理和数据的统计是一项必备的过程&#xff0c;处理误差和数据统计的结果与否关系到这项工程最后的结果是否达到预计的要求&#xff0c;所测量数据的实际值和理论值是否接近&#xff0c;关系到工程最后质量…

latex 分行 表格标题过长_Latex 表格内文字过长自动换行 表格内单元格内容强制换行...

\usepackage{array}\begin{tabular}{m{5cm}}或者\begin{tabular}{p{0.9\columnwidth}}[LaTex]表格内单元格内容强制换行multirowmultirow 宏包提供了 \multirow 命令可以在表格中排版横跨两行以上的文本。命令的格式如下&#xff1a;\multirow{nrows}[bigstructs]{width}[fixup…

9月份计算机应用基础统考,2018年9月计算机应用基础统考题库-网考计算机应用基础真题1...

一、单选题1.第一台电子计算机是1946年在美国研制成功的&#xff0c;该机的英文缩写名是______。A.ENIACB.EDVACC.EDSACD.MARK答案&#xff1a;A知识点&#xff1a;理论基础\计算机的基本概念\计算机的发展\计算机的诞生2.计算机的通用性使其可以求解不同的算术和逻辑问题&…

java word 转换 图片_怎样把手机上的图片转换成word?

在当今这个快速发展的时代&#xff0c;人手一部手机是件很正常的事&#xff0c;小编的手机上往往会存有许多喜欢的文字图片&#xff0c;可是那么多的图片又会占用很多手机的空间&#xff0c;这样就有些不好了。庆幸的是最近小编学习到一个可以将手机上的图片转化成文字的技巧&a…

uic计算机科学与技术,北京师范大学-香港浸会大学联合国际学院UIC理工科技学部高招网...

马真真计算机科学与技术专业,现于美国南加州大学攻读硕士学位想想当初报考UIC的时候是冲着网上一个学长说的“如果你想要学习&#xff0c;那么来UIC绝对不会后悔”&#xff0c;现在毕业了&#xff0c;发现&#xff0c;确实如此。四年&#xff0c;学习了方方面面的知识&#xff…

应付账款账龄分析模板_6万字长文剖析宁德时代(三):财务分析

本文为《6万字长文剖析宁德时代》的第三篇。本文来自微信公众号&#xff1a; 凯昇资本(ID&#xff1a;gh_9c57a4031683)&#xff0c;头图来自&#xff1a;视觉中国在《6万字长文剖析宁德时代(一)&#xff1a;核心技术》和《6万字长文剖析宁德时代(二)&#xff1a;市场分析》中我…

阜阳市乡镇企业中专学校计算机教师高翱简介,2017年中南林业科技大学博士研究生奖助学金...

类似问题答案2020年中南林业科技大学博士研究生奖助学金奖助学金 为提高研究生待遇水平&#xff0c;保障研究生安心学习、潜心研究&#xff0c;我校统筹财政投入、科研经费、学费收入等各种资源&#xff0c;设立研究生国家奖学金、学业奖学金、单项奖学金等多种奖学金&#xff…

开发db文件_Swoole高效跟传统的web开发有什么区别?life

一、swoole的运行模式Swoole高效跟传统的web开发有什么区别&#xff0c;除了传统的LAMP/LNMP同步开发模式&#xff0c;swoole的异步开发模式是怎么样的。我的官方群点击此处。获取更多的swoole学习资料以及视频源码笔记。程序猿的生活&#xff1a;面试12家公司&#xff0c;收获…

计算机设备操作与讲解,计算机组成与操作系统简介

计算机的五大组成部分控制器、运算器、存储器、输入设备、输出设备控制器&#xff1a;是计算机的指挥系统&#xff0c;负责控制计算机其他硬件的工作运算器&#xff1a;负责数学运算与逻辑运算控制器运算器CPU》人的大脑存储器内存优点&#xff1a;存取速度快缺点&#xff1a;断…

360网络修复工具_Win10网络图标不见了解决方法

经常有网友反馈&#xff0c;电脑桌面右下角的网络图标不见了&#xff0c;有时候想要对网络进行相关设置&#xff0c;而找不到入口。下面以最新的系统为例&#xff0c;谈谈Win10网络图标不见了的原因与解决办法。Win10网络图标不见了怎么办&#xff1f;如果仅仅是桌面右下角找不…

计算机课中初中一年级学生特点分析,初中信息技术说课稿:计算机的组成

初中信息技术说课稿《计算机的组成》首先非常感谢我们学校我这个机会&#xff0c;今天能和全镇的信息技术权威坐到一起&#xff0c;我感到无比的荣幸。下面我将从以下8个方面来阐述我的这节课&#xff0c;不当之处&#xff0c;还请各位专家多多批评指正。一、教材分析计算机是初…

c语言使用未初始化的内存怎么解决_C语言快速入门——数组与调试进阶

由ASCII码表的输出程序,我们可以认识到使用循环语句处理一组连续的数据有着巨大的优势。在更普遍的情况下,数据由一组离散的数值组成,如一组学生的考试成绩。对于这些数据的处理,有效的方式是使用循环。但前提是数据可以在循环中有序的访问。ASCII码表输出程序中,循环变量…