Tutorial ionik geser bingkai Terbaik Pada tahun 2024, Dalam tutorial ini Anda dapat mempelajari ion-slide-kotak,contoh,
Sliding frame komponen wadah multi-halaman berisi, atau tarik switch halaman slide:
Efeknya adalah sebagai berikut:
<ion-slide-box on-slide-changed="slideHasChanged($index)"> <ion-slide> <div class="box blue"><h1>BLUE</h1></div> </ion-slide> <ion-slide> <div class="box yellow"><h1>YELLOW</h1></div> </ion-slide> <ion-slide> <div class="box pink"><h1>PINK</h1></div> </ion-slide> </ion-slide-box>
milik | jenis | Detil |
---|---|---|
delegasi-handle (Opsional) | 字符串 | Pegangan dengan |
tidak-terus (Opsional) | 布尔值 | Apakah automatic sliding bingkai slide. |
slide-Interval (Opsional) | 数字 | Berapa banyak milidetik untuk menunggu awal slide (jika terus itu benar). default adalah 4000. |
show-pager (Opsional) | 布尔值 | Sliding page frame ditampilkan. |
pager-klik (Opsional) | 表达式 | Ketika Anda mengklik halaman, memicu ekspresi (jika shou-pager benar). Lulus 'index' variabel. |
on-slide-berubah (Opsional) | 表达式 | Ketika slide, memicu ekspresi. Lulus 'index' variabel. |
aktif-slide (Opsional) | 表达式 | Pengikatan Model ke kotak slide ini. |
<ion-slide-box active-slide="myActiveSlide"> <ion-slide> <div class="box blue"><h1>BLUE</h1></div> </ion-slide> <ion-slide> <div class="box yellow"><h1>YELLOW</h1></div> </ion-slide> <ion-slide> <div class="box pink"><h1>PINK</h1></div> </ion-slide> </ion-slide-box>
.slider { height: 100%; } .slider-slide { color: #000; background-color: #fff; text-align: center; font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; font-weight: 300; } .blue { background-color: blue; } .yellow { background-color: yellow; } .pink { background-color: pink; } .box{ height:100%; } .box h1{ position:relative; top:50%; transform:translateY(-50%); }
angular.module('ionicApp', ['ionic']) .controller('SlideController', function($scope) { $scope.myActiveSlide = 1; })