公众号小程序制作步骤_angularjs完成时间轴效果的

2021-01-11 11:33

angularjs实现时间轴效果的示例代码       本篇文章主要介绍了angularjs实现时间轴效果的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 <中引入

 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,核心部分的改写。
<中引用。

/* 时间轴 */
.timeline-event {
 margin-bottom: 0px !important;
s {
 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 
 /timeline-badge 
 timeline-panel 
 span 
 {{event.hour}}
 /span 
 div ng-repeat="item in event.data" 
 span {{item.customerName}} /span 
 div 
 span 
 {{item.reserveNumber}}人
 /span 
 /div 
 /div 
 /timeline-panel 
 /timeline-event 
 /timeline 
 /ion-content 
 /ion-view 

.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"

四 效果图

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




扫描二维码分享到微信

在线咨询
联系电话

020-66889888