使用angularjs怎么实现一个时间轴效果

这期内容当中小编将会给大家带来有关使用angularjs怎么实现一个时间轴效果，文章内容丰富且以专业的角度为大家分析和叙述，阅读完这篇文章希望大家可以有所收获。

在index.html中引入

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

app.js中引用，不引用就没有效果。

二 改写css

根据需求改写css,核心部分的改写。

可以写在style.css中，也可以新建一个css文件，但是一定要在index.html中引用。

/* 时间轴 */ .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; }

三 页面

准备工作做完了，下面是页面的编写。

<!--html页面--> <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 >          <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 = '时间轴';   makeData();   function makeData() {    $scope.teamDataList=[     {      hour:"12:00",      data:[       {        customerName:"中国国旅（江苏）国际旅行社有限公司",        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"      }]     }    ];   }  });

上述就是小编为大家分享的使用angularjs怎么实现一个时间轴效果了，如果刚好有类似的疑惑，不妨参照上述分析进行理解。如果想知道更多相关知识，欢迎关注亿速云行业资讯频道。