Komponen ionik kotak slide digunakan untuk mengimplementasikan tab yang dapat digeser. Ini terutama memantau klik tab dan acara geser slide, dan menanganinya. Gunakan loop NG-RePeat untuk mengoptimalkan dan menyederhanakan kode. Siswa yang membutuhkan bisa melihatnya.
Mari kita ambil rendering terlebih dahulu:
Kode CSS yang digunakan:
.tab_default {border-bottom: solid 1px #f2f2f2; padding: 6px 0;}. Tab_Select {border-bottom: solid 1px #3e89f5; Kotak-Shadow: 0 -3px 8px #C1D3F0 INSET;}. Arrow-top {Posisi: Absolute; Lebar: 0; Tinggi: 0; Atas: 20px; Perbatasan: 6px Solid #3E89F5; Border-Right-Color: Transparan; Perbatasan-Kidal: Transparan; Border-top-color: transparent;}. Arrow-top: After {Content: ''; Posisi: Absolute; Lebar: 0; Tinggi: 0; Border: 12px solid #fff; Kanan: -12px; Bawah: -13px; Border-Right-Color: Transparan; Perbatasan-Kidal: Transparan; Border-top-color: transparan;}Kode HTML di halaman:
<ion-view view-title = "tab geser"> <ion-content have-buncing = "false"> <div style = "display: flex; lebar: 100%;"> <div style = "flex: 1; text-align: center;" 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==$index"></div> </div> </div> <ion-slide-box on-slide-changed = "slidechanged (index)" active-slide = "slideIndex" do-continue = "false" show-pager = "false"> <ion-slide ng-repeat = "p di halaman"> <v ng-include = "p"> </div> </ion-slide "> <v ng-include =" p "> </div> </ion-s </ion-content> </ion-view>Kode pengontrol.js yang sesuai:
$ scope.tabnames = ['java', 'html5', 'android']; $ scope.slectIndex = 0; $ scope.activeslide = fungsi (indeks) {// pemicu saat mengklik $ scope.slectindex = index; $ ionicsLideBoxDelegate.slide (index);}; $ scope.slidechanged = function (index) {// pemicu saat geser $ scope.slectIndex = index;}; $ scope.pages = ["Templates/Tab01.html", "Templates/Tab02.Html; "Ht."Tab01.html, tab02.html, tab03.html semuanya serupa. Posting tab01:
<div> halaman 01 <p style = "margin-top: 30px;"> <img src = "img/tab01.jpg"/> </p> </div>
Catatan:
• Saat mengklik, tetapkan indeks $ indeks loop saat ini ke variabel slideIndex. Gunakan NG-Class di tab untuk menentukan apakah indeks dan slideIndex sama saat mengklik. Jika hal yang sama benar, ubah gaya tab yang sesuai;
• Saat meluncur, fungsi kotak slide digunakan, diubah secara on-slide. Ketika halaman slide berubah, indeks variabel akan diteruskan ke fungsi perubahan untuk mengidentifikasi indeks slide saat ini;
• Jika Anda tidak ingin menggulir dan cukup klik, Anda dapat menghapus mendengarkan yang diubah secara berulang, atau menambahkan properti, nonaktifkan-scroll = "true", dan melarang pengguliran halaman slide;
Di atas adalah semua konten artikel ini. Saya berharap ini akan membantu untuk pembelajaran semua orang dan saya harap semua orang akan lebih mendukung wulin.com.