ส่วนประกอบกล่องสไลด์ของไอออนิกใช้ในการใช้แท็บที่เลื่อนได้ ส่วนใหญ่จะตรวจสอบการคลิกแท็บและเลื่อนเหตุการณ์หน้าเลื่อนและจัดการกับพวกเขาตามนั้น ใช้ลูปทำซ้ำ NG เพื่อเพิ่มประสิทธิภาพและทำให้รหัสง่ายขึ้น นักเรียนที่ต้องการความต้องการสามารถดูได้
มาดูกันก่อน:
รหัส CSS ที่ใช้:
.tab_default {ขอบด้านล่าง: Solid 1px #f2f2f2; Padding: 6px 0;}. tab_select {ขอบด้านล่าง: Solid 1px #3e89f5; Box-shadow: 0 -3px 8px #c1d3f0 inset;}. ลูกศร -o-top {ตำแหน่ง: สัมบูรณ์; ความกว้าง: 0; ความสูง: 0; ด้านบน: 20px; ชายแดน: 6px Solid #3E89F5; สีสัน-ขวาสี: โปร่งใส; ชายแดนซ้ายสี: โปร่งใส; เส้นขอบด้านบนสี: โปร่งใส;}. ลูกศร -o-top: หลังจาก {content: ''; ตำแหน่ง: สัมบูรณ์; ความกว้าง: 0; ความสูง: 0; ชายแดน: 12px Solid #FFF; ขวา: -12px; ด้านล่าง: -13px; สีสัน-ขวาสี: โปร่งใส; ชายแดนซ้ายสี: โปร่งใส; สีสันจากสีด้านบน: โปร่งใส;}รหัส HTML ในหน้า:
<ion-view view-title = "Sliding Tab"> <ion-content has-buncing = "false"> <div style = "display: flex; width: 100%;"> <div style = "Flex: 1; text-align: center;" ng-repeat = "d ใน tabnames" ng-click = "activeSlide ($ index)" ng-class = "slectindex == $ index? 'tab_select': ''"> {{d}} <div style = "{{{{15+$ index*33}} <ion-slide-box on-slide-change = "slidechanged (index)" active-slide = "slideIndex" ทำ-ต่อเนื่อง = "false" show-pager = "false"> <ion-slide ng-repeat = "p ในหน้า"> <div ng-include = "p"> </ion-content> </ion-view>controller.js ที่เกี่ยวข้อง:
$ scope.tabnames = ['java', 'html5', 'Android']; $ scope.slectIndex = 0; $ scope.activeSlide = ฟังก์ชั่น (ดัชนี) {// ทริกเกอร์เมื่อคลิก $ scope.slectindex = index; $ ionicslideboxDelegate.slide (ดัชนี);}; $ scope.slideChanged = ฟังก์ชั่น (ดัชนี) {// ทริกเกอร์เมื่อเลื่อน $ scope.slectIndex = ดัชนี;}; $ scope.pages = ["templates/tab01.html" tamplates/tab02.html "tab01.html, tab02.html, tab03.html มีความคล้ายคลึงกันทั้งหมด โพสต์ tab01:
<div> หน้า 01 <p style = "margin-top: 30px;"> <img src = "img/tab01.jpg"/> </p> </div>
บันทึก:
•เมื่อคลิกให้กำหนดดัชนี $ ดัชนีของลูปปัจจุบันให้กับตัวแปร SlideIndex ใช้ NG-Class ในแท็บเพื่อตรวจสอบว่าดัชนีและ SlideIndex นั้นเหมือนกันเมื่อคลิกหรือไม่ หากสิ่งเดียวกันเป็นจริงให้เปลี่ยนรูปแบบของแท็บที่เกี่ยวข้อง
•เมื่อเลื่อนฟังก์ชั่นของกล่องสไลด์จะถูกใช้โดยสไลด์เปลี่ยน เมื่อหน้าสไลด์เปลี่ยนแปลงดัชนีตัวแปรจะถูกส่งผ่านไปยังฟังก์ชั่นการเปลี่ยนแปลงเพื่อระบุดัชนีของสไลด์ปัจจุบัน
•หากคุณไม่ต้องการเลื่อนและคลิกคุณสามารถลบการฟังที่เปลี่ยนไปได้หรือเพิ่มคุณสมบัติปิดใช้งาน SCROLL = "จริง" และห้ามการเลื่อนหน้าสไลด์
ข้างต้นเป็นเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการเรียนรู้ของทุกคนและฉันหวังว่าทุกคนจะสนับสนุน wulin.com มากขึ้น