HTML tutorial
CSS3 tutorial
Bootstrap tutorial
JavaScript tutorial
JQuery tutorial
AngularJS tutorial
React tutorial
NodeJS tutorial
PHP tutorial
Python tutorial
Python3 tutorial
Django tutorial
Linux tutorial
Docker tutorial
Ruby tutorial
Java tutorial
C tutorial
C ++ tutorial
Perl tutorial
JSP tutorial
Lua tutorial
Scala tutorial
Go tutorial
ASP.NET tutorial
C # tutorial
Sliding frame is a component of a multi-page container contains, or drag the page slide switch:
The effect is as follows:
<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>
Attributes | Types of | Detail |
---|
delegate-handle (Optional) | 字符串 | The handle with |
does-continue (Optional) | 布尔值 | Whether automatic sliding frame slide. |
slide-interval (Optional) | 数字 | How many milliseconds to wait for the beginning of the slide (if it continues was true). The default is 4000. |
show-pager (Optional) | 布尔值 | Sliding frame page is displayed. |
pager-click (Optional) | 表达式 | When you click the page, trigger the expression (if shou-pager is true). Pass an 'index' variable. |
on-slide-changed (Optional) | 表达式 | When the slide, trigger the expression. Pass an 'index' variable. |
active-slide (Optional) | 表达式 | The binding model to the current slide 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; })