ionic幻灯指令ion-slide-box-创新互联

学习要点：
1.幻灯片 : ion-slide-box 指令介绍
2. ion-slide-box : 属性设置定制播放行为
3. ion-slide-box : 事件及变量
4. 脚本接口: $ionicSlideBoxDelegate

1.幻灯片 : ion-slide-box指令介绍
ion-slide-box可以做什么
1. 可以做启动切换页面
2. 可以做首页幻灯
3. 可以做页面左右滑动切换
Ionic放在那个指令使用
主要放在 ion-view 中使用
幻灯片也是一种常见的 UI 表现方式，它从一组元素中选择一个投射到屏幕可视区域，用户
可以通过滑动方式（向左或向右）进行切换：

在 ionic 中，使用 ion-slide-box指令声明幻灯片元素，使用 ion-slide指令声明幻灯页元素：

...
...
...

2.ion-slide-box :属性设置定制播放行为
指令 ion-slide-box 有一些可选的属性可以定制其播放行为：
does-continue- 是否循环切换
你可能注意到， 刚才的示例中，开头的幻灯页只能向左滑动，最后的幻灯页只能向右滑动。
将 does-continue属性值设为 true，就可以让幻灯页组首尾连接起来，循环切换。
auto-play- 是否自动播放

通过将 auto-play 属性设置为 true，可以让幻灯页自动切换。切换的间隔默认是 4000ms，可
以 通过属性 slide-interval 进行调整。
slide-interval- 自动播放的间隔时间，默认为 4000ms
show-pager- 是否显示分页器
分页器用来指示幻灯页的选中状态，位于幻灯片的底部。 允许值为： true | false

3. ion-slide-box :事件及变量
指令 ion-slide-box 提供了可选的用于事件监听的属性：
pager-click- 分页器点击事件
pager-click 属性应当设置为一个当前作用域上的函数调用表达式，这个函数将被 传入被点
击的分页按钮对应的幻灯页序号： index
on-slide-changed- 幻灯页切换事件
on-slide-changed 属性应当设置为一个当前作用域上的函数调用表达式，这个函数 将被传入
当前幻灯页的序号： $index
active-slide- 当前幻灯页索引

active-slide 属性应当设置为一个当前作用域上的变量，当幻灯片切换时，这个变 量同步的
反应当前的幻灯页索引号
4.脚本接口: $ionicSlideBoxDelegate

可以使用服务$ionicSlideBoxDelegate 在脚本中操作幻灯片对象：
update() -重绘幻灯片
有时，比如当容器尺寸发生变化时，需要调用 update()方法重绘幻灯片。
slide(to[,speed])- 切换到指定幻灯页
参数 to 表示切换的目标幻灯页序号，参数 speed 是可选的，表示以毫秒 为单位的切换时间
enableSlide([shouldEnable])- 幻灯片使能
参数 shouldEnable的允许值为： true | false 。

previous()- 切换到前一张幻灯页
next()- 切换到后一张幻灯页
currentIndex()- 获得当前幻灯页的序号
slideCount()- 获得全部幻灯页的数量

交流QQ群：187269144

QQ群2：438443293

QQ群3：248403526

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。