ionic4中实现时间线

前言：

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

实现过程：

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

ionic timeline

目录结构：

实现代码：

about.page.html

  
       
       大米番茄
  
           
    
    
      发展历程
      团队介绍
      功能介绍
    



 
  

    
      
      

        

          
          

            
番茄PC (V1.0)
            
大米时代建立番茄项目组，开始研究PC端番茄
            

               450
              2018-11-1
            
          
        

        

          
          

            
番茄PC (V1.2.5)
            
专注实现单个番茄和记录功能的完善优化
            

               1,450
               2018-12-1
            
          
        

        

          
          

            
番茄PC (V2.0)
            
实现任务列表和番茄时钟的交互，添加数据分析，各种设置
            

               2,450
               2019-2-8
            
          
        

        

          
          

            
番茄PC (V2.1~V2.2)
            
优化番茄任务和时钟的交互，实现社交化番茄，推出番茄排行榜，换肤
            

               2,450
               2019-3-8
            
          
        

        

          
          

            
番茄APP(V3.0)
            
尝试手机App版番茄，实现灵活的时间管理
            

               3,450
               2019-3-31
            
          
        
      
    
    
    
      

        
【团队介绍】
        
一个具有超强的学习能力和探索精神的开发团队
        
身手不凡但却非科班出身
        
借助技术改变生活，释放大脑，高效学习
 

        
【前端】
        
仙客8号，月柿，番茄酱，红红的托码头

        
【后端】
        
喜报三元，毛秀才

        
有建议或者有bug反馈的小伙伴
        
欢迎发邮件至项目组长：{{tomatoLinkman}}
        
邮箱地址：{{tomatoContactWay}}
   
        
        
      
    

    
      

          
          
【当前版本】V3.0
          
【番茄钟】
          
开始-休息-停止操作
          
自定义番茄时间-休息时间

          
【数据记录】
          
番茄使用时间和番茄数量统计

          
【番茄排名】
          
查看当前番茄排行榜

          
【多平台同步】
          
登录功能
          
iPhone，Android无缝同步

          
【设置】
          
震动提示
          
完成/休息结束多样铃声可选
          
          
多样工作的白噪音可选，助你沉浸在工作中
          
以流畅的动画进行衔接，将操作过程最简化
 
      
    
  

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;
  }

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