The best ionic sliding frame Tutorial In 2024, In this tutorial you can learn ion-slide-box,Examples,
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; })