vue 时间刻度_vue时间轴风格式的图片展示

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

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

好的，先上图，目标效果

先分析

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

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

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

首先是上层的html代码

<div class="big_img"><img src="../../assets/img/pre.png" class="pre2" @click="handlePre(); actived(activePosition-1)" ><!-- <img class="img" src="./img/demo6.jpg" alt=""> --><div @click="goDetail()" style="cursor: pointer"><filter-img class="img" :src="img_loca"></filter-img></div><img src="../../assets/img/next.png" class="next2" @click="handleNext(); actived(activePosition+1)"></div><div><img src="../../assets/img/pre.png" class="pre" @click="handlePre"><img src="../../assets/img/next.png" class="next" @click="handleNext"></div>

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

然后是下层的html代码

<div class="time_linebox" style="margin-left: 1px; margin-top: -60px"><div ref="mytimeline" style="position: relative; left: 0"><div class="time_lineitem" v-for="(item, index) in timeList" :key="index"><div class="time_linenode"></div><div class="time_lineyear">{{item.time}}</div><div class="time_linecontent" :class="{upper: index % 2, active: activePosition === index}" @click="actived(index)"><filter-img :src="item.img"></filter-img><p>{{item.title}}</p></div><div class="line"></div></div></div><div class="time_line" style="position: relative; top: -280px"></div>

为将要移动的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';}},

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

成品展示

附上自己的sg地址，希望大家多多留言点赞！

vue时间轴风格式的图片展示 - 个人文章 - SegmentFault 思否segmentfault.com

vue 时间刻度_vue时间轴风格式的图片展示相关推荐

vue日程安排_vue 时间安排表
仿照这种时间安排表的形式,使用vue完成这种类似课表的显示效果首先将每周的预约信息放入一个长度为7的数组中,0-6表示星期天到星期六创建一个33*7的数组每个格子1表示该时间空闲,null表示该 ...
vue+js+element组件上传图片（el-upload）与图片展示
一.首先搭建vue,和配置element-UI组件这个我就不多说了,前面的文章里面都有讲到二.编写布局安装你的需要来写布局,我这里是点击上传按钮,就会弹出新的一个弹出层页面,是运用element ...
matplotlib 改变时间刻度间隔改变时间刻度格式
目录需求1 更改时间格式/间隔方法1 将转为str,再截取方法2 控制ax.xaxis对象减小间隔改变时间刻度的格式显示每个月的第n天方法三需求3:设置坐标轴格式(百分比) 需求1 更 ...
vue @click 赋值_vue 手写一个时间选择器
vue 手写一个时间选择器最近研究了 DatePicker 的实现原理后做了一个 vue 的 DatePicker 组件,今天带大家一步一步实现 DatePicker 的 vue 组件. 原理 Da ...
vue使用iview Timeline 时间轴不显示问题
vue Timeline 时间轴不显示渲染的效果官网代码 <Timeline pending><TimelineItem>发布1.0版本</TimelineItem&g ...
vue 日期面板_VUE项目中如何方便的转换日期和时间
做项目开发时对各种不同的时间进行处理是一件不可避免的事情,比如Unix时间戳需要转换为具体的时间来显示,或者需要根据给出的时间格式化成想要的形式,接下来就拿目前最流行的VUE框架来详细阐述如何对时间进 ...
如何使用Qt绘制时间刻度轴
#简述在日常开发过程中,我们一般都使用Qt提供的控件库.但是在特殊情况下,我们需要一些特殊的效果,而Qt本身提供的控件有限,可能满足不了我们的需求.所有这个时候需要我们自己去创造新的控件. 创造新的 ...
python x轴显示指定时间刻度
将x轴设置为时间轴将x轴设置为时间轴显示指定日期注意事项: 在对x轴进行时间转换时需要注意: - datetime.date2num():是从1,1,1开始计数,单位是天 - time.mkti ...
canvas上纯JS实现可滑动时间刻度轴
时间刻度轴,支持滑动和点击刻度轴,先放一张效果图. 实现原理其实很简单,就是在canvas上画图,然后支持点击拖动效果,主要代码如下: 一,JS实现 1,定义TimeScaleChart类,定义内部变 ...

vue 时间刻度_vue时间轴风格式的图片展示

vue 时间刻度_vue时间轴风格式的图片展示相关推荐

最新文章

热门文章