ionic 滑动框
ion-slide-box
滑动框是一个包含多页容器的组件，每页滑动或拖动切换：
效果图如下：
用法
<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>
API
| 属性 | 类型 | 详情 |
|---|---|---|
| delegate-handle
(可选)
|
字符串 |
该句柄用 |
| does-continue
(可选)
|
布尔值 |
滑动框是否自动滑动。 |
| slide-interval
(可选)
|
数字 |
等待多少毫秒开始滑动（如果继续则为true）。默认为4000。 |
| show-pager
(可选)
|
布尔值 |
滑动框的页面是否显示。 |
| pager-click
(可选)
|
表达式 |
当点击页面时，触发该表达式（如果shou-pager为true）。传递一个\’索引\’变量。 |
| on-slide-changed
(可选)
|
表达式 |
当滑动时，触发该表达式。传递一个\’索引\’变量。 |
| active-slide
(可选)
|
表达式 |
将模型绑定到当前滑动框。 |
实例
HTML 代码
<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>
CSS 代码
.slider {
height: 100%;
}
.slider-slide {
padding-top: 80px;
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;
}
JavaScript 代码
angular.module(\'ionicApp\', [\'ionic\'])
.controller(\'SlideController\', function($scope) {
$scope.myActiveSlide = 1;
})
