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';

}

},

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

成品展示