转载

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 (可选)	`字符串`	该句柄用`$ionicSlideBoxDelegate`来标识这个滑动框。
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;    })

正文到此结束

所属分类： ionic 教程

本文标签： App 代码 API JavaScript CSS 2015 IDE http ip src tab 实例 java HTML
版权声明： 本文为互联网转载文章，出处已在文章中说明(部分除外)。如果侵权，请联系本站长删除，谢谢。
本文海报： 生成海报一生成海报二

其他链接

关于本站

本站定位：个人技术类博客

本站作用：写博客、记日志、闲聊扯淡鼓捣技术。

问题交流

ionic 滑动框

ionic 滑动框

ion-slide-box

用法

API

实例

HTML 代码

CSS 代码

JavaScript 代码

热门推荐

相关文章

ionic 教程

说给你听

本文目录

随机标签

书籍教程

近期评论

网站信息

其他链接

关于本站

问题交流