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=""> -->