項目將近完結，在修正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时间轴风格式的图片展示的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。