Vue實(shí)現(xiàn)縱向的物流時(shí)間軸效果的示例代碼
前言:
在當(dāng)今數(shù)字化的時(shí)代,用戶(hù)體驗(yàn)的優(yōu)化至關(guān)重要。物流信息的展示作為電商和供應(yīng)鏈領(lǐng)域中的關(guān)鍵環(huán)節(jié),其呈現(xiàn)方式直接影響著用戶(hù)對(duì)貨物運(yùn)輸狀態(tài)的感知和滿(mǎn)意度。
縱向的物流時(shí)間軸效果能夠以清晰、直觀的方式向用戶(hù)展示物流的各個(gè)關(guān)鍵節(jié)點(diǎn),幫助用戶(hù)更好地跟蹤貨物的運(yùn)輸進(jìn)程。在 Vue 這一強(qiáng)大的前端框架中實(shí)現(xiàn)這樣的效果,不僅能夠提升開(kāi)發(fā)效率,還能為用戶(hù)帶來(lái)更加流暢和交互性強(qiáng)的體驗(yàn)。
物流時(shí)間軸效果在提升信息呈現(xiàn)的直觀性以及增強(qiáng)用戶(hù)體驗(yàn)方面表現(xiàn)出色,并且同樣適用于其他場(chǎng)景。
一、實(shí)現(xiàn)的效果圖
注:截圖中的數(shù)據(jù)為模擬的假數(shù)據(jù)。
二、實(shí)現(xiàn)方案
前言中介紹了下物流時(shí)間軸的作用和優(yōu)勢(shì),我的項(xiàng)目里就是用了物流時(shí)間軸的效果去呈現(xiàn)項(xiàng)目中的【資產(chǎn)動(dòng)態(tài)檔案】這一模塊,可以直觀且清晰的看到各個(gè)節(jié)點(diǎn)的信息。
- 首先用
ul
-li
的方式實(shí)現(xiàn):
代碼如下:
<div class="commonTitle">資產(chǎn)動(dòng)態(tài)檔案</div> <div class="content"> <ul class="dynamicFiles" v-for="(item,index) in timeAxis" :key="index"> <li>{{ item.time }}</li> <li class="detail">{{ item.address }}</li> </ul> </div>
- 此處時(shí)間軸中用到的數(shù)據(jù)暫時(shí)先用假數(shù)據(jù),大家自行替換即可:
// 時(shí)間軸列表 timeAxis: [ { state: 1, // 狀態(tài): 1:已完成,0:未完成 time: '今天2024年5月2日 上午10:50:11', address: '【鎮(zhèn)江轉(zhuǎn)運(yùn)中心】已發(fā)出 下一站【鎮(zhèn)江為民中心】' }, { state: 0, time: '2024年5月2日 上午10:30:10', address: '【鎮(zhèn)江轉(zhuǎn)運(yùn)中心】已收入' }, { state: 0, time: '2024年5月2日 上午10:10:08', address: '【江蘇省無(wú)錫市富民路】已發(fā)出 下一站【鎮(zhèn)江中心】' }, { state: 0, time: '2024年5月2日 上午7:59:24', address: '【江蘇省無(wú)錫市富民路公司】已打包' }, { state: 0, time: '2024年5月2日 上午6:40:23', address: '【江蘇省無(wú)錫市富民路公司】已收件' } ],
css
樣式實(shí)現(xiàn):
/* 時(shí)間軸 */ .dynamicFiles { position: relative; line-height: 36px; font: 24px PingFangSC-Regular; color: #17233d; padding-left: 32px; .detail { margin-top: 8px; padding: 12px 20px; background: #eaf6ff; border-radius: 12px; } &:before { position: absolute; margin-top: 8px; left: 4px; content: ""; height: 12px; width: 12px; border-radius: 50%; background: linear-gradient( 318deg, #cbcfe2 0%, #dfe7f0 100%); z-index: 1; } &:after { position: absolute; top: 12px; left: 8px; bottom: -28px; content: ""; width: 1px; border-right: 1px solid #dde4ef; } &:not(:first-child) { padding-top: 20px; } &:last-child { &:after { display: none; } } &:first-child { &:before { background: linear-gradient( 180deg, #4eccfe 0%, #3f90fd 100%); } } &:last-child > .detail { background: #ffeaea; } }
大功告成,可直接復(fù)制粘貼!
三、總結(jié)
實(shí)現(xiàn)方案應(yīng)該有很多,本文這種僅供參考。有些常見(jiàn)場(chǎng)景的功能和效果,換個(gè)場(chǎng)景其實(shí)同樣適用,不過(guò)這也要看各方UI大師的思路和設(shè)計(jì)稿了。
到此這篇關(guān)于Vue實(shí)現(xiàn)縱向的物流時(shí)間軸效果的示例代碼的文章就介紹到這了,更多相關(guān)Vue縱向時(shí)間軸內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
Vue指令v-for遍歷輸出JavaScript數(shù)組及json對(duì)象的常見(jiàn)方式小結(jié)
這篇文章主要介紹了Vue指令v-for遍歷輸出JavaScript數(shù)組及json對(duì)象的常見(jiàn)方式,結(jié)合實(shí)例形式總結(jié)分析了vue.js使用v-for指令遍歷輸出js數(shù)組與json對(duì)象的常見(jiàn)操作技巧,需要的朋友可以參考下2019-02-02vue長(zhǎng)列表優(yōu)化之虛擬列表實(shí)現(xiàn)過(guò)程詳解
前端的業(yè)務(wù)開(kāi)發(fā)中會(huì)遇到不使用分頁(yè)方式來(lái)加載長(zhǎng)列表的需求,下面這篇文章主要給大家介紹了關(guān)于vue長(zhǎng)列表優(yōu)化之虛擬列表實(shí)現(xiàn)的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-08-08Vue.js實(shí)現(xiàn)無(wú)限加載與分頁(yè)功能開(kāi)發(fā)
這篇文章主要為大家詳細(xì)介紹了Vue.js實(shí)現(xiàn)無(wú)限加載與分頁(yè)功能開(kāi)發(fā)實(shí)踐,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-11-11vue3?TS?vite?element?ali-oss使用教程示例
這篇文章主要為大家介紹了vue3?TS?vite?element?ali-oss使用教程示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-07-07Vue實(shí)現(xiàn)購(gòu)物小球拋物線的方法實(shí)例
這篇文章主要給大家介紹了Vue實(shí)現(xiàn)購(gòu)物小球拋物線的方法實(shí)例,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-11-11vue項(xiàng)目中v-model父子組件通信的實(shí)現(xiàn)詳解
vue.js,是一個(gè)構(gòu)建數(shù)據(jù)驅(qū)動(dòng)的 web 界面的庫(kù)。Vue.js 的目標(biāo)是通過(guò)盡可能簡(jiǎn)單的 API 實(shí)現(xiàn)響應(yīng)的數(shù)據(jù)綁定和組合的視圖組件。下面這篇文章主要給大家介紹了關(guān)于vue項(xiàng)目中v-model父子組件通信實(shí)現(xiàn)的相關(guān)資料,需要的朋友可以參考下。2017-12-12構(gòu)建Vue大型應(yīng)用的10個(gè)最佳實(shí)踐(小結(jié))
這篇文章主要介紹了構(gòu)建Vue大型應(yīng)用的10個(gè)最佳實(shí)踐(小結(jié)),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11關(guān)于Vue 消除Token過(guò)期時(shí)刷新頁(yè)面的重復(fù)提示問(wèn)題
很多朋友在token過(guò)期時(shí)刷新頁(yè)面,頁(yè)面長(zhǎng)時(shí)間未操作,再刷新頁(yè)面時(shí),第一次彈出“token失效,請(qǐng)重新登錄!”提示,針對(duì)這個(gè)問(wèn)題該怎么處理呢,下面小編給大家?guī)?lái)原因分析及解決方法,一起看看吧2021-07-07