ionic 幻灯指令 ion-slide-box
来源:互联网 发布:微店和淘宝店哪个可靠 编辑:程序博客网 时间:2024/06/16 02:06
学习要点:
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 指令声明幻灯页元素:
<ion-slide-box>
<ion-slide>...</ion-slide>
<ion-slide>...</ion-slide>
...
</ion-slide-box>
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() - 获得全部幻灯页的数量
- ionic 幻灯指令 ion-slide-box
- Ionic基础——幻灯指令 ion-slide-box
- ionic ion-slide-box学习笔记整理
- ionic之ion-slide-box实现图片轮播
- ionic 滑动块 ion-slide-box 左右无缝滚动
- ionic的ion-slide-box使用ng-repeat不显示
- ionic入门教程第十课-接着说说ion-slide-box和它的注意事项、slide-tabs
- ionic入门教程第十课-接着说说ion-slide-box和它的注意事项、slide-tabs
- ionic中的slide-box
- angularjs+ionic 轮播ion-slide-box标签使用下拉重新请求数据之后页面变形
- ionic ion-slide-box网络加载图片,及时更新,无限循环
- ionic,ion-slide-box获取后台数据后循环播放失效的解决方法。
- ionic之ion-slide-box实现图片轮播样式修改
- 解决Ionic的ion-slide-box 2条数据渲染问题
- 使用ionic中ion-slide-box实现移动app轮播特效
- ionic slide-box(滑动框)
- 利用ionic里的<ion-slide-box>和 modal 做个仿淘宝商品详情页顶部轮播图的demo
- ionic slide-box等元素使用
- 韩顺平的校内网案例中的一个比较典型的table布局
- Android 使用工具
- 吴英昊:电商搜索引擎的架构设计和性能优化
- UGUI世界坐标转屏幕坐标
- initWithFrame 方法的理解与使用
- ionic 幻灯指令 ion-slide-box
- LeetCode- Two Sum
- 安卓Animation动画(转载)
- 内容转化为List
- 【C语言提高15】字符串一级指针内存模型
- 使用vim-gui-common实现从vim窗口复制内容到系统剪贴板
- Java:单例模式的七种写法
- 如何使用monitor(DDMS)抓取traceview文件
- vector