ionic 滑动框

ion-slide-box

滑动框是一个包含多页容器的组件，每页滑动或拖动切换：

效果图如下：

用法

        
           
        
         
BLUE
        
  
         
           
        
         
YELLOW
        
  
         
           
        
         
PINK

API

属性 类型 详情
delegate-handle
(可选)
字符串

该句柄用$ionicSlideBoxDelegate来标识这个滑动框。
does-continue
(可选)
布尔值

滑动框是否自动滑动。
slide-interval
(可选)
数字

等待多少毫秒开始滑动（如果继续则为true）。默认为4000。
show-pager
(可选)
布尔值

滑动框的页面是否显示。
pager-click
(可选)
表达式

当点击页面时，触发该表达式（如果shou-pager为true）。传递一个'索引'变量。
on-slide-changed
(可选)
表达式

当滑动时，触发该表达式。传递一个'索引'变量。
active-slide
(可选)
表达式

将模型绑定到当前滑动框。

实例

HTML 代码

      	
       	  
        
         
BLUE
        
	
       	
       	  
        
         
YELLOW
        
	
       	
       	  
        
         
PINK

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;  })

尝试一下 »