项目将近完结，在修正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';
}
},
不为最右边时，可以右移，这里限制条件为总长度减去一个小样品的长度
成品展示
