仿uniapp 時間軸元件

2021-10-20 12:01:46 字數 2711 閱讀 2632

現在自己所做的專案當中, 所遇到的, 和各個相關的元件都不太一樣, 所以,在這裡,自己手寫了乙個時間軸

html部分**:

class

="history_content"

>

class

="history_content_item"

v-for

="(item,id) in historylist"

:key

="id"

>

class

="history_left_item"

>

class

="item_year"

>

}view

>

class

="item_line"

>

class

="item_line_dot"

>

view

>

view

>

class

="item_desc"

>

class

="desc_list"

v-for

="(list,id) in item.leftitem"

:key

="id"

>

class

="title"

>

}view

>

class

="word"

>

}view

>

view

>

view

>

view

>

class

="history_right_item"

>

class

="item_desc"

>

class

="desc_list"

v-for

="(right,id) in item.rightitem"

:key

="id"

>

class

="title"

>

}view

>

class

="word"

>

}view

>

view

>

view

>

class

="item_line"

>

class

="item_line_dot"

>

view

>

view

>

class

="item_year"

>

}view

>

view

>

view

>

view

>

css部分**:

.item_year,  .item_desc

.history_content .history_left_item ,.history_right_item

.history_content .history_left_item .item_year , .history_right_item .item_year

.history_content .history_left_item .item_line , .history_right_item .item_line

.history_content .history_left_item .item_line .item_line_dot , .history_right_item .item_line .item_line_dot

.history_content .history_left_item .item_desc

.history_content .history_right_item .item_desc

.history_content .history_left_item .item_desc .desc_list

.history_content .history_left_item .item_desc .desc_list .title , .history_right_item .item_desc .desc_list .title

.history_content .history_left_item .item_desc .desc_list .word, .history_right_item .item_desc .desc_list .word

.history_content .history_right_item .item_desc .desc_list

js部分**:

export,]

, rightitem:[,

]},,

],rightitem:[,

]},]

}}

至此, 就全部結束了, 通過兩層迴圈, 將資料渲染出來即可。

Vue之時間軸元件

實現思路及步驟 頁面分為四個部分 1 左側時間 2 中間圓點 3 右側內容 4 虛線部分 最外層div,relative布局,方便子元素計算尺寸 左側時間固定寬度,顯示時間 本demo 100px 之後absolute絕對定位 left 0 中間圓點absolute絕對定位,因為左側寬度已經定為10...

mysql 時間軸 使用MySQL計算時間軸的變化

我是mysql的新手,我需要你的幫助.我有一張包含類似資料的 robotposx robotposy robotposdir robotshortestpath 0.1 0.2 15 1456 0.2 0.3 30 1456 0.54 0.67 15 1456 0.68 0.98 22 1234 0...

時間軸運動

截了一小段gif效果圖,如下 js 如下 function win,console.log timewdarr 計算時間差 var timediff function time1,time2 獲取時間段,並存入陣列 timedata.each function index,el console.lo...