前言：

之前做番茄時(shí)，有做過時(shí)間線，這個(gè)功能，可以用來社區(qū)里人員留言，也可以用來介紹歷史！

實(shí)現(xiàn)過程：

其實(shí)，一開始不知道怎么實(shí)現(xiàn)，就不停的再網(wǎng)上找例子，后來養(yǎng)成了一個(gè)壞習(xí)慣，一做就不懂腦子，上來就開始查，請用人家做好的，吃別人剩下的。
參考鏈接：
Beautiful Timeline Component in Ionic 3

ionic timeline

目錄結(jié)構(gòu)：

實(shí)現(xiàn)代碼：

about.page.html

<ion-header ><ion-toolbar class="titleCSS"><ion-back-button></ion-back-button> <ion-title  style=text-align:center> 大米番茄</ion-title></ion-toolbar><img src="../../assets/image/Teampicture.png" style="width:100%;"><ion-segment [(ngModel)]="tabs" ><ion-segment-button value="development">發(fā)展歷程</ion-segment-button><ion-segment-button value="team">團(tuán)隊(duì)介紹</ion-segment-button><ion-segment-button value="function">功能介紹</ion-segment-button></ion-segment>
</ion-header><ion-content ><div [ngSwitch]="tabs"><ion-list *ngSwitchCase="'development'" style="width:90%;height:90%;margin-left:5%;margin-top:2%;margin-bottom:2%"><ion-refresher on-refresh="doRefresh()" pulling-icon="ion-load-d" spinner="ios-small"></ion-refresher><ul class="timeline"><li><img src="../../assets/image/1.0.png" alt="" class="timeline-thumb"><div class="timeline-item"><h4>番茄PC (V1.0)</h4><p>大米時(shí)代建立番茄項(xiàng)目組，開始研究PC端番茄</p><div class="timeline-stats"><i class="ion-heart"></i> 450<span class="pos-absolute-right"><i class="ion-ios-clock"></i>2018-11-1</span></div></div></li><li><img src="../../assets/image/1.2.5.png" alt="" class="timeline-thumb"><div class="timeline-item"><h4>番茄PC (V1.2.5)</h4><p>專注實(shí)現(xiàn)單個(gè)番茄和記錄功能的完善優(yōu)化</p><div class="timeline-stats"><i class="ion-heart"></i> 1,450<span class="pos-absolute-right"><i class="ion-ios-clock"></i> 2018-12-1</span></div></div></li><li><img src="../../assets/image/2.0.png" alt="" class="timeline-thumb"><div class="timeline-item"><h4>番茄PC (V2.0)</h4><p>實(shí)現(xiàn)任務(wù)列表和番茄時(shí)鐘的交互，添加數(shù)據(jù)分析，各種設(shè)置</p><div class="timeline-stats"><i class="ion-heart"></i> 2,450<span class="pos-absolute-right"><i class="ion-ios-clock"></i> 2019-2-8</span></div></div></li><li><img src="../../assets/image/2.1.png" alt="" class="timeline-thumb"><div class="timeline-item"><h4>番茄PC (V2.1~V2.2)</h4><p>優(yōu)化番茄任務(wù)和時(shí)鐘的交互，實(shí)現(xiàn)社交化番茄，推出番茄排行榜，換膚</p><div class="timeline-stats"><i class="ion-heart"></i> 2,450<span class="pos-absolute-right"><i class="ion-ios-clock"></i> 2019-3-8</span></div></div></li><li><img src="../../assets/image/3.0.png" alt="" class="timeline-thumb"><div class="timeline-item"><h4>番茄APP(V3.0)</h4><p>嘗試手機(jī)App版番茄，實(shí)現(xiàn)靈活的時(shí)間管理</p><div class="timeline-stats"><i class="ion-heart"></i> 3,450<span class="pos-absolute-right"><i class="ion-ios-clock"></i> 2019-3-31</span></div></div></li></ul></ion-list><ion-list *ngSwitchCase="'team'"><div style="width:90%;height:90%;margin-left:5%;margin-top:2%;margin-bottom:2%" ><p>【團(tuán)隊(duì)介紹】</p><p>一個(gè)具有超強(qiáng)的學(xué)習(xí)能力和探索精神的開發(fā)團(tuán)隊(duì)</p><p>身手不凡但卻非科班出身</p><p>借助技術(shù)改變生活，釋放大腦，高效學(xué)習(xí)</p> <br><P>【前端】</P><p>仙客8號，月柿，番茄醬，紅紅的托碼頭</p><br><P>【后端】</P><p>喜報(bào)三元，毛秀才</p><br><p>有建議或者有bug反饋的小伙伴</p><p>歡迎發(fā)郵件至項(xiàng)目組長：{{tomatoLinkman}}</p><p>郵箱地址：{{tomatoContactWay}}</p>   <!--<p>歡迎發(fā)郵件至項(xiàng)目組長：{{tomatoLinkman}}</p>--><!--<p>郵箱地址：{{tomatoContactWay}}</p>--></div></ion-list><ion-list *ngSwitchCase="'function'"><div style="width:90%;height:90%;margin-left:5%;margin-top:2%;margin-bottom:2%"><!--<p>【當(dāng)前版本】{{tomatoVersion}}</p>--><p>【當(dāng)前版本】V3.0</p><p>【番茄鐘】</p><p>開始-休息-停止操作</p><p>自定義番茄時(shí)間-休息時(shí)間</p><br><p>【數(shù)據(jù)記錄】</p><p>番茄使用時(shí)間和番茄數(shù)量統(tǒng)計(jì)</p><br><p>【番茄排名】</p><p>查看當(dāng)前番茄排行榜</p><br><p>【多平臺同步】</p><p>登錄功能</p><p>iPhone，Android無縫同步</p><br><p>【設(shè)置】</p><p>震動(dòng)提示</p><p>完成/休息結(jié)束多樣鈴聲可選</p>          <p>多樣工作的白噪音可選，助你沉浸在工作中</p><p>以流暢的動(dòng)畫進(jìn)行銜接，將操作過程最簡化</p><br> </div></ion-list></div></ion-content>

about.page.scss

/*Optional*/
.bar-stable {background-color: #d9d9d9 !important;}.tabs{background-color: #d9d9d9 !important;}.icon-size-lg {font-size: 28px;}/*Timeline*/.pos-absolute-right {position: absolute;right: 8px;}.timeline {position: relative;margin: 15px 0 0 0;}.timeline:before {content: '';position: absolute;top: 0;bottom: 0;width: 5px;background: #afdcf8;left: 44px;margin-left: -10px;z-index: 1;}.timeline .timeline-thumb {border-radius: 500px;width: 50px;z-index: 2;position: absolute;left: 10px}.timeline .timeline-thumb.timeline-icon {height: 50px;text-align: center;color: white;border: 5px solid #CBD0D3;}.timeline .timeline-thumb.timeline-icon i {font-size: 28px;margin: 6px 0;display: block;}.timeline .timeline-item {margin-left: 72px;border-bottom: 1px solid #ccc;padding-bottom: 8px;}.timeline .timeline-stats {position: relative;font-size: 12px;color: #7F8C8D;}.divider-title {background: #e4e4e4;padding: 5px 15px;}/* === Color Themes === */.text-muted {color: #6d6d72 !important;}.color-gray {color: #8e8e93 !important;}.color-red {color: #ff3b30 !important;}.bg-color-red {background-color: #ff3b30 !important;}.color-white {color: #ffffff !important;}.color-yellow {color: #ffcc00 !important;}.bg-color-yellow {background-color: #ffcc00 !important;}.color-green {color: #4cd964 !important;}.color-orange {color: #ff9500 !important;}.bg-color-orange {background-color: #ff9500 !important;}.color-blue {color: #007aff !important;}.bg-color-blue {background-color: #007aff !important;}.color-lightblue {color: #5ac8fa !important;}.bg-color-lightblue {background-color: #5ac8fa !important;}.color-bluegray {color: #607d8b !important;}.bg-color-bluegray {background-color: #607d8b !important;}.color-night {color: #2B1B17 !important;}.color-black {color: black !important;}.bg-color-white {background-color: #ffffff;}.bg-color-green {background-color: #4cd964 !important;}.titleCSS{background-color: #D2383A !important;}

忘記保存最終的結(jié)果圖了，尷尬，不過沒事！還是能看的

總結(jié)

以上是生活随笔為你收集整理的ionic4中实现时间线的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。