angularjs实现时间轴效果的示例代码

一 引入包

引入angular-timeline包。

下载地址：

在index.html中引入

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

二 改写css

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

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

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

三 页面

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

 </div>
</timeline-panel>

.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",id:"aaaabbb12112"
 }]

}

];

}

});

四 效果图

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [e-mail] 举报，一经查实，本站将立刻删除。