隨著社群網路等平台的普及,時間軸逐漸成為了人們分享生活經驗的一種流行形式。時間軸可以按照時間順序展示一系列事件或活動,幫助人們回顧過去,了解歷史,同時也可以用作展示個人成長、旅行日記、團隊專案進度等內容。
在網頁開發中,想要實現時間軸的展示,則可以使用Vue框架,來快速建立並實現效果。下面我們就來了解如何使用Vue實現時間軸。
一、頁面佈局
時間軸通常分為兩種形式:縱向時間軸和橫向時間軸。橫向時間軸一般展示某種時間段內一系列事件的內容,而縱向時間軸則依照時間順序展示事件,類似一個時間線。
本文以縱向時間軸為例,首先根據設計稿,我們需要撰寫頁面佈局代碼;
<div class="timeline"> <div class="timeline-header"> <div class="timeline-header-line"></div> </div> <div class="timeline-container"> <div class="timeline-item"> <div class="timeline-item-time">2010年</div> <div class="timeline-item-content">content 1</div> </div> <div class="timeline-item"> <div class="timeline-item-time">2012年</div> <div class="timeline-item-content">content 2</div> </div> <div class="timeline-item"> <div class="timeline-item-time">2015年</div> <div class="timeline-item-content">content 3</div> </div> <div class="timeline-item"> <div class="timeline-item-time">2017年</div> <div class="timeline-item-content">content 4</div> </div> </div> </div>
在這裡為了讓樣式更好的展示,我採用了flex佈局。
二、定義資料及渲染
接下來,需要在 Vue 實例中定義資料並將資料渲染進頁面中。
new Vue({ el: '#app', data: { list: [ { time: '2010年', content: 'content 1' }, { time: '2012年', content: 'content 2' }, { time: '2015年', content: 'content 3' }, { time: '2017年', content: 'content 4' } ] } })
然後使用v-for
指令在頁面上循環遍歷數據,並使用{{}}
綁定資料到頁面中。
<div class="timeline-item" v-for="item in list"> <div class="timeline-item-time">{{ item.time }}</div> <div class="timeline-item-content">{{ item.content }}</div> </div>
三、實現動畫效果
為了增加使用者體驗,我們可以為每個事件添加動畫效果。將data
中的list
屬性新增一個新屬性isShow
#,用於識別是否顯示目前事件內容。
data: { list: [ { time: '2010年', content: 'content 1', isShow: false }, { time: '2012年', content: 'content 2', isShow: false }, { time: '2015年', content: 'content 3', isShow: false }, { time: '2017年', content: 'content 4', isShow: false } ] }
接下來,可以為每個事件新增點擊事件,來控制目前事件內容展示和隱藏,這裡我們需要用到Vue的事件處理器和class
綁定。
<div class="timeline-item" v-for="(item, index) in list" :key="index"> <div class="timeline-item-time" @click="item.isShow = !item.isShow"> {{ item.time }} </div> <div class="timeline-item-content" :class="{show: item.isShow}">{{ item.content }}</div> </div>
我們可以在class
屬性中新增判斷,如果目前item.isShow
為真則新增show
類,否則不加,從而實現事件內容的展示與隱藏。
.timeline-item-content { display:none; height: 0; transition:all .3s linear; } .show { display:block; height: auto; }
透過上面的程式碼可以實現一個最基本的時間軸組件。
最後簡單貼上完整的程式碼。
<div id="app"> <div class="timeline"> <div class="timeline-header"> <div class="timeline-header-line"></div> </div> <div class="timeline-container"> <div class="timeline-item" v-for="(item, index) in list" :key="index"> <div class="timeline-item-time" @click="item.isShow = !item.isShow"> {{ item.time }} </div> <div class="timeline-item-content" :class="{show: item.isShow}"> {{ item.content }} </div> </div> </div> </div> </div> <style> .timeline { position: relative; max-width: 1000px; margin: 30px auto; } .timeline-header { position: absolute; top: 0; left: 50%; width: 2px; height: 100%; background: #ccc; transform: translate(-50%, calc(50% - 15px)); } .timeline-header-line { position: absolute; top: 0; left: 50%; width: 50px; height: 30px; background: #ccc; transform: translateX(-50%); border-radius: 30px; } .timeline-container { padding: 40px; display: flex; flex-direction: column; justify-content: space-between; position: relative; } .timeline-item { display: flex; flex-wrap: wrap; justify-content: space-between; position: relative; margin-bottom: 50px; padding: 0 50px; cursor: pointer; } .timeline-item:after { content: ''; position: absolute; top: 12px; left: -15px; width: 20px; height: 20px; background: #ccc; border-radius: 50%; } .timeline-item:before { content: ''; position: absolute; top: 0; left: -2px; width: 0; height: 0; border-top: 20px solid transparent; border-bottom: 20px solid transparent; border-left: 20px solid #ccc; } .timeline-item:after, .timeline-item:before { z-index: 2; } .timeline-item-content { display: none; height: 0; transition: all .3s linear; position: relative; z-index: 1; width: 100%; margin-left: 10px; } .timeline-item-time { width: 150px; font-size: 16px; font-weight: bold; color: #333; text-align: right; flex-shrink: 0; margin-right: 20px; } .show { display: block; height: auto; } </style> <script> new Vue({ el: '#app', data: { list: [ { time: '2010年', content: 'content 1', isShow: false }, { time: '2012年', content: 'content 2', isShow: false }, { time: '2015年', content: 'content 3', isShow: false }, { time: '2017年', content: 'content 4', isShow: false } ] } }) </script>
以上是如何使用 Vue 實現時間軸?的詳細內容。更多資訊請關注PHP中文網其他相關文章!