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

一引入包

引入角度时间线包。

下载地址：角度-时间轴。活力

在index.html中引入

link href=' lib/angular-timeline/dist/angular-timeline。CSS“rel=”外部no follow“rel=”样式表脚本src=' http : lib/angular-timeline/dist/angular-timeline。js '/脚本应用程序。射流研究…中引用，不引用就没有效果。

二改写钢性铸铁

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

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

/* 时间轴*/.时间线-事件{ margin-bottom: 0px！重要；}时间轴徽章。infos {底色： # 47d 09 e！重要；} .timeline:before在{ width: 1px！重要；left: 24px！重要；页边距-top: 30px！重要；背景-color: #47d09e！重要；}时间轴-徽章{ left: 16px！重要；宽度： 15px！重要；高： 15px！重要；top: 15px！重要；魔盒-暗影：无！重要；}时间轴-面板{左侧浮动：重要；宽度： 85%!重要；padding: 13px 0px 6px 0px！重要；左边距： 39px！重要；背景：无！重要；border:无！重要；魔盒-暗影：无！重要；}隐藏{ visibility:重要；}隐藏{ visibility:重要；显示器：无！重要；}时间轴-面板时间{ font-size : 14pxfont-family : ' PingFangSC-Regular '；}时间轴-面板。详细信息{ display : flex display :-web套件-flex；align-items:居中；-web套件-align-items :中心；正义-内容：空格；-WebKit-正义-内容：空格-介于；页边距-top : 10px；}时间轴-面板。细节行名{ font-size : 16px最大宽度： 80%;color : # 1c 1cd display :内联块；font-family : ' PingFangSC-Medium '；}时间轴-面板。细节linelevel { position:绝对值；右： 18%；边界半径： 4px颜色：白色；padd : 1px 5px 1px 5px font-size : 11px；}时间轴-面板。细节线条层次-g {底色： # f 27373}时间轴-面板。细节线级-p {背景色： # e 29431}时间轴-面板。细节line num { float : right font-size : 14px；color: # 323232}三页面

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

！- html页面-ion-view view view-title=' { { title } } ' ion-content scroll=' true ' timeline-event ng 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。数据“span class=”行名称“{ item。customername } }/span div style=' float 3360 right；'span class='行号' { item。reservenumber } }人/span/div/div/timeline-panel/timeline-event/timeline/ion-content/ion-view//controller angular。模块('研究应用程序。控制器' .控制器(' TimeLineCtrl '，函数($scope，$rootScope，$location) { $scope.title='时间轴；makeData()；函数makeData(){ $ scope。team datalist=[{ hours : ' 12:00 '，data:[ { customerName: '中国国旅（江苏)国际旅行社有限公司，reserveNumber:'12 '，id: ' aaaabbb12112 ' }，{ customerName: '江苏2 '，reserveNumber:'122 '，id : ' aaababb 12112 ' } } }，{ hour:'13:00 '，data:[{ customerName: '江苏2 '，reserveNumber:'112 '，id : ' aaababb 12112 ' } } }，{ hour:'14:00 '，data:[{ customerName: '江苏3 '，reserveNumber:'12 '，id : ' aaababb 12112 ' } } }，{ hour:'13:00 '，data:[{ customerName: '江苏2 '，reserveNumber:'112 '，id : ' aaababb 12112 ' } } }，{ hour:'14:00 '，data:[{ customerName: '江苏3 '，reserveNumber:'12 '，id : ' aaaaaa bb 12112 ' }]}]；} });四效果图

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