Anglejs에서 타임라인을 구현하는 방법-JS 튜토리얼-php.cn

Anglejs에서 타임라인을 구현하는 방법

亚连

풀어 주다： 2018-06-23 16:55:02

원래의

2035명이 탐색했습니다.

이 글에서는 타임라인 효과를 얻기 위한 Anglejs의 샘플 코드를 주로 소개합니다. 편집자 입장에서는 꽤 좋다고 생각해서 지금 공유하고 참고용으로 올려보겠습니다. 에디터를 따라가며 함께 살펴볼까요

1. 패키지 소개

Angular-Timeline 패키지를 소개합니다.

다운로드 주소:angular-timeline.zip

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에 인용되어 있으며, 인용하지 않으면 아무런 효과가 없습니다.

2 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: &#39;PingFangSC-Regular&#39;;
}

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: &#39;PingFangSC-Medium&#39;;
}

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>
     <p class="detail" ng-repeat="item in event.data">
      <span class="linename">{{item.customerName}}</span>
      <p style="float: right;">
         <span class="linenum">
         {{item.reserveNumber}}人
         </span>
      </p>

     </p>
    </timeline-panel>
   </timeline-event>
  </timeline>

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

로그인 후 복사

rrree

4개의 렌더링

위 내용은 제가 모든 사람을 위해 편집한 내용입니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다.