一 引入包

引入angular-timeline包。
鏈接: https://pan.baidu.com/s/1jI1mmQq 密碼: 67q6
在index.html中引入

<link href="lib/angular-timeline/dist/angular-timeline.css" rel="stylesheet">
<script src="lib/angular-timeline/dist/angular-timeline.js"></script>

app.js中引用，不引用就沒(méi)有效果。

引用.png

二 改寫css

根據(jù)需求改寫css,核心部分的改寫。
可以寫在style.css中，也可以新建一個(gè)css文件，但是一定要在index.html中引用。

/* 時(shí)間軸 */
.timeline-event {
  margin-bottom: 0px !important;
}

timeline-badge.infos {
  background-color: #47d09e !important;
}

.timeline:before {
  width: 1px !important;
  left: 24px !important;
  margin-top: 30px !important;
  background-color: #47d09e !important;
}

timeline-badge {
  left: 16px !important;
  width: 15px !important;
  height: 15px !important;
  top: 15px !important;
  box-shadow: none !important;
}

timeline-panel {
  float: left !important;
  width: 85% !important;
  padding: 13px 0px 6px 0px !important;
  margin-left: 39px !important;
  background: none !important;
  border: none !important;
  box-shadow: none !important;
}

timeline-panel:before {
  visibility: hidden !important;
}

timeline-panel:after {
  visibility: hidden !important;
  display: none !important;
}

timeline-panel .time {
  font-size: 14px;
  font-family: 'PingFangSC-Regular';
}

timeline-panel .detail {
  display: flex;
  display: -webkit-flex;
  align-items: center;
  -webkit-align-items: center;
  justify-content: space-between;
  -webkit-justify-content: space-between;
  margin-top: 10px;
}

timeline-panel .detail .linename {
  font-size: 16px;
  max-width: 80%;
  color: #1c1c1c;
  display: inline-block;
  font-family: 'PingFangSC-Medium';
}

timeline-panel .detail .linelevel {
  position: absolute;
  right: 18%;
  border-radius: 4px;
  color: white;
  padding: 1px 5px 1px 5px;
  font-size: 11px;
}

timeline-panel .detail .linelevel-g {
  background-color: #f27373;
}

timeline-panel .detail .linelevel-p {
  background-color: #e29431;
}

timeline-panel .detail .linenum {
  float: right;
  font-size: 14px;
  color: #323232;
}

三 頁(yè)面

準(zhǔn)備工作做完了，下面是頁(yè)面的編寫。

<!--html頁(yè)面-->
<ion-view view-title="{{title}}">
  <ion-content scroll="true">

    <timeline>
      <timeline-event ng-repeat="event in teamDataList" side="right">
        <timeline-badge class="infos">
        </timeline-badge>
        <timeline-panel class="infos">
              <span class="time">
                {{event.hour}}
              </span>
          <div class="detail" ng-repeat="item in event.data">
            <span class="linename">{{item.customerName}}</span>
            <div style="float: right;">
                  <span class="linenum">
                  {{item.reserveNumber}}人
                  </span>
            </div>

          </div>
        </timeline-panel>
      </timeline-event>
    </timeline>

  </ion-content>
</ion-view>

//controller
angular.module('studyApp.controllers')

  .controller('TimeLineCtrl', function ($scope, $rootScope, $location) {
    $scope.title = '時(shí)間軸';

    makeData();

    function makeData() {
      $scope.teamDataList=[

        {
          hour:"12:00",
          data:[
            {
              customerName:"中國(guó)國(guó)旅（江蘇）國(guó)際旅行社有限公司",
              reserveNumber:"12",
              id:"aaaabbb12112"
            },
            {
              customerName:"江蘇2",
              reserveNumber:"122",
              id:"aaaabbb12112"
            }
          ]
        },
        {
          hour:"13:00",
          data:[{
            customerName:"江蘇2",
            reserveNumber:"112",
            id:"aaaabbb12112"
          }]

        },
        {
          hour:"14:00",
          data:[{
            customerName:"江蘇3",
            reserveNumber:"12",
            id:"aaaabbb12112"
          }]

        },
        {
          hour:"13:00",
          data:[{
            customerName:"江蘇2",
            reserveNumber:"112",
            id:"aaaabbb12112"
          }]

        },
        {
          hour:"14:00",
          data:[{
            customerName:"江蘇3",
            reserveNumber:"12",
            id:"aaaabbb12112"
          }]

        }
      ];

    }

  });

四 效果圖

效果圖.png