ionic4中实现时间线

前言：

之前做番茄时，有做过时间线，这个功能，可以用来社区里人员留言，也可以用来介绍历史！

实现过程：

其实，一开始不知道怎么实现，就不停的再网上找例子，后来养成了一个坏习惯，一做就不懂脑子，上来就开始查，请用人家做好的，吃别人剩下的。
参考链接：
Beautiful Timeline Component in Ionic 3

ionic timeline

目录结构：

实现代码：

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">发展历程</ion-segment-button>
      <ion-segment-button value="team">团队介绍</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>大米时代建立番茄项目组，开始研究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>专注实现单个番茄和记录功能的完善优化</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>实现任务列表和番茄时钟的交互，添加数据分析，各种设置</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>优化番茄任务和时钟的交互，实现社交化番茄，推出番茄排行榜，换肤</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>尝试手机App版番茄，实现灵活的时间管理</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>【团队介绍】</p>
        <p>一个具有超强的学习能力和探索精神的开发团队</p>
        <p>身手不凡但却非科班出身</p>
        <p>借助技术改变生活，释放大脑，高效学习</p> <br>
        <P>【前端】</P>
        <p>仙客8号，月柿，番茄酱，红红的托码头</p><br>
        <P>【后端】</P>
        <p>喜报三元，毛秀才</p><br>
        <p>有建议或者有bug反馈的小伙伴</p>
        <p>欢迎发邮件至项目组长：{{tomatoLinkman}}</p>
        <p>邮箱地址：{{tomatoContactWay}}</p>   
        <!--<p>欢迎发邮件至项目组长：{{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>【当前版本】{{tomatoVersion}}</p>-->
          <p>【当前版本】V3.0</p>
          <p>【番茄钟】</p>
          <p>开始-休息-停止操作</p>
          <p>自定义番茄时间-休息时间</p><br>
          <p>【数据记录】</p>
          <p>番茄使用时间和番茄数量统计</p><br>
          <p>【番茄排名】</p>
          <p>查看当前番茄排行榜</p><br>
          <p>【多平台同步】</p>
          <p>登录功能</p>
          <p>iPhone，Android无缝同步</p><br>
          <p>【设置】</p>
          <p>震动提示</p>
          <p>完成/休息结束多样铃声可选</p>          
          <p>多样工作的白噪音可选，助你沉浸在工作中</p>
          <p>以流畅的动画进行衔接，将操作过程最简化</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;
  }

忘记保存最终的结果图了，尴尬，不过没事！还是能看的