Ionic의 슬라이드 박스 구성 요소는 슬라이드 가능한 탭을 구현하는 데 사용됩니다. 주로 탭 클릭 및 슬라이드 페이지 슬라이딩 이벤트를 모니터링하고 그에 따라 처리합니다. NG-Repeat 루프를 사용하여 코드를 최적화하고 단순화하십시오. 도움이 필요한 학생들이 살펴볼 수 있습니다.
먼저 렌더링을하겠습니다.
사용 된 CSS 코드 :
.tab_default {Border-Bottom : solid 1px #f2f2f2; 패딩 : 6px 0;}. tab_select {border-bottom : solid 1px #3e89f5; Box-Shadow : 0 -3px 8px #c1d3f0 inset;}. Arrow-top {위치 : 절대; 너비 : 0; 높이 : 0; 상단 : 20px; 국경 : 6px 고체 #3e89f5; 국경 오른쪽 색 : 투명; 경계-왼쪽 색 : 투명; 테두리 색상 : 투명;}. 화살표 : {content : ''; 위치 : 절대; 너비 : 0; 높이 : 0; 국경 : 12px Solid #fff; 오른쪽 : -12px; 하단 : -13px; 국경 오른쪽 색 : 투명; 경계-왼쪽 색 : 투명; 국경-엽 컬러 : 투명한;}페이지의 HTML 코드 :
<iOn-view view-title = "슬라이딩 탭"> <Ion-Content has-buncing = "false"> <div style = "display : flex; 너비 : 100%;"> <div style = "flex : 1; 텍스트-정렬 : 중심;" ng-repeat = "d in tabnames"ng-click = "activeslide ($ index)"ng class = "slectindex == $ index? 'tab_select': ''"> {{d}} <div style = "left : {{{15+$ index*33}%"ng-show = "slectindex == $ $"> <Ion-Slide-Box On-Slide-Changed = "SlideChanged (index)"active-slide = "slideIndex"do-continue = "false"show-pager = "false"> <iOn-slide ng-repeat = "p in pages"> <div ng-include = "p"> </iion-slide> </ison-content> </ion-view>해당 Controller.js 코드 :
$ scope.tabnames = [ 'java', 'html5', 'android']; $ scope.slectindex = 0; $ scope.activeslide = function (index) {// $ scope.slectIndex = index를 클릭 할 때 트리거; $ IonicsLideBoxDelegate.Slide (index);}; $ scope.slideChanged = function (index) {// $ scope.slectIndex = index;}; $ scope.pages = [ "templates/tab01.html", "templates/tab0.html"];tab01.html, tab02.html, tab03.html은 모두 비슷합니다. Tab01 게시 :
<div> page 01 <p style = "margin-top : 30px;"> <img src = "img/tab01.jpg"/> </p> </div>
메모:
• 클릭 할 때 전류 루프의 인덱스 $ index를 변수 slideIndex에 할당하십시오. 탭에서 NG 클래스를 사용하여 클릭 할 때 인덱스와 슬라이드 인덱스가 동일인지 확인하십시오. 마찬가지라면 해당 탭의 스타일을 변경하십시오.
• 슬라이딩시 슬라이드 박스의 함수가 사용되며 슬라이드 변경이 변경됩니다. 슬라이드 페이지가 변경되면 변수 인덱스가 변경 기능으로 전달되어 현재 슬라이드의 인덱스를 식별합니다.
• 스크롤하지 않고 클릭하지 않으려면 슬라이드 변경 청취를 제거하거나 속성을 추가 할 수 있습니다.
위는이 기사의 모든 내용입니다. 모든 사람의 학습에 도움이되기를 바랍니다. 모든 사람이 wulin.com을 더 지원하기를 바랍니다.