Najlepszy samouczek jonowe ramki przesuwnych W 2024 r. W tym samouczku możesz dowiedzieć się jon-slide-box,Przykłady,
Przesuwane Ramka jest elementem pojemnika wielostronicowego zawiera lub przeciągnij przełącznik suwakowy strony:
Efekt jest następujący:
<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>
nieruchomość | typ | detal |
---|---|---|
Delegat rękojeść (Opcjonalnie) | 字符串 | Uchwyt z |
nie-nadal (Opcjonalnie) | 布尔值 | Czy automatyczne rozsuwane slajdzie ramki. |
slide-interval (Opcjonalnie) | 数字 | Ile milisekund czekać na początku suwaka (jeśli nadal było prawdą). Wartość domyślna to 4000. |
show-pager (Opcjonalnie) | 布尔值 | wyświetlany jest przesuwne strony ramki. |
pager kliknięciem (Opcjonalnie) | 表达式 | Po kliknięciu na stronę, wyzwolić ekspresję (jeśli Shou-pager jest prawdą). Przekazać zmienną 'index'. |
on-slide-changed (Opcjonalnie) | 表达式 | Gdy zjeżdżalnia, wyzwolić ekspresję. Przekazać zmienną 'index'. |
active-slide (Opcjonalnie) | 表达式 | Wiązanie modelu do bieżącego polu slajdów. |
<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; })