Das beste ionischen Gleitrahmen-Tutorial im Jahr 2024. In diesem Tutorial können Sie Ion-Dia-Box,Beispiele, lernen
Schieberahmen ist Bestandteil eines mehrseitigen Behälter enthält, oder die Seite Schiebeschalter ziehen:
Der Effekt ist wie folgt:
<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>
Immobilien | Typ | Detail |
---|---|---|
Delegat-Griff (Optional) | 字符串 | Der Griff mit |
nicht-weiter (Optional) | 布尔值 | Ob automatische Schieberahmen Schlitten. |
Dia-Intervall (Optional) | 数字 | Wie viele Millisekunden für den Beginn des Schiebers zu warten (wenn es wahr ist weiter). Der Standardwert ist 4000. |
Show-Pager (Optional) | 布尔值 | Schieberahmen wird angezeigt. |
Pager-Klick (Optional) | 表达式 | Wenn Sie die Seite klicken, lösen Sie den Ausdruck (wenn Shou-Pager wahr ist). Übergeben Sie ein "Index" Variable. |
on-Einschub geändert (Optional) | 表达式 | Wenn der Schieber, lösen Sie den Ausdruck. Übergeben Sie ein "Index" Variable. |
Aktiv-Schlitten (Optional) | 表达式 | Die Bindungsmodell auf die aktuelle Folie Box. |
<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; })