学习要点:
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() - 获得全部幻灯页的数量

交流QQ群:187269144

QQ群2:438443293

QQ群3:248403526


转载于:https://blog.51cto.com/dingzhaoqiang/1708726

ionic 幻灯指令 ion-slide-box相关推荐

  1. Win10 UWP开发系列:使用VS2015 Update2+ionic开发第一个Cordova App

    安装VS2015 Update2的过程是非常曲折的.还好经过不懈的努力,终于折腾成功了. 如果开发Cordova项目的话,推荐大家用一下ionic这个框架,效果还不错.对于Cordova.PhoneG ...

  2. JS配合css实现slide文字框缩放伸展效果

    <!DOCTYPE html> <html> <head> <meta http-equiv="content" content=&quo ...

  3. css 图片切换模版

    (1)淘宝网4种JS图片切换幻灯焦点图代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &q ...

  4. Ionic4.x 中自定义公共模块

    1.创建公共模块以及组件 ionic g module module/slide ionic g component module/slide 2.公共模块 slide.module.ts 中暴露对应 ...

  5. ionic4 组件的使用(一)

    ionic4 组件的使用 1.在ionic4.x中创建公共模块以及组件 //公共模块 module为文件夹名字 slide为模块名称 ionic g module module/slide //sli ...

  6. ASP.NET MVC 实现页落网资源分享网站+充值管理+后台管理(15)之前台网站页面

    源码下载地址:http://www.yealuo.com/Sccnn/Detail?KeyValue=c891ffae-7441-4afb-9a75-c5fe000e3d1c 本项目主要是一个素材的分 ...

  7. Python pptx模块

    安装pptx pip install python-pptx Python pptx模块是一个Python库,用于创建和更新Microsoft PowerPoint (.pptx)文件.该模块允许开发 ...

  8. Obsidian 插件(二):Advanced_Slides 的使用

    文章目录 Advanced Slides 的使用 一. 概述 1. 简介 2. 特征 3. 第一个 PPT 二. 基础语法 1. 水平垂直幻灯片 2. 元素注释 3. 幻灯片注释 4. 块注解 5. ...

  9. 三万字-计算机三级-信息安全技术-信息安全保障概述

    今年五月份报的信息安全技术,考试时间为2022.9.26,因为封校和疫情原因,没有参加上:在这些期间准备时间只能说是10天,10天好像就有点多,大概一周吧,能考个及格,所以当大家备考时一定要老早准备, ...

最新文章

  1. 非常全面的AutoML资源,看这个就够了!
  2. SQL SERVER数据导入到EXCEL
  3. 七七计算机论文网,qepipnu
  4. 计算机2020中级考试题,突发!2020年中级考试分值及评分标准大变!
  5. /etc/fstab 官方文档
  6. 用 JAVA 开发游戏连连看(之四)添加更多的功能
  7. 【UVa11178】Morley's Theorem(向量旋转+直线交点)
  8. 步进电机、伺服电机、舵机、无刷电机、有刷电机区别
  9. Ubuntu安装MinGW32
  10. 软件测试理论知识基础详细解说—总结
  11. 表白网页制作_表白网页_创意表白_表白神器
  12. python如何压缩pdf_PDF文件怎么压缩,一键压缩PDF文件
  13. 突发,拼多多发生重大变更!
  14. html中创建表格在正上方的表格标题
  15. 学python如何找工作
  16. 第15课:ul,添加新闻信息列表ol,添加图书销售排行榜
  17. MAC UltraEdit18.00.0.40 绿色版,亲测有效
  18. 全文搜索,迅搜(Xunsearch)使用心得
  19. 【干货】五个免费下载PPT模板的网站,你一定会用到的
  20. 莫队 从零基础到入门 超详细

热门文章

  1. 图像超分辨率进ASC19超算大赛,PyTorch+GAN受关注
  2. SQLite大漏洞!所有Chromium浏览器中招,安卓iOS应用也受殃及
  3. 如何加精准粉丝,一个巧妙实用的方法!
  4. 解决SpringBoot jar包太大的问题
  5. 未来两年九大信息安全威胁
  6. PyCharm 专题
  7. JAVA总裁--Java数组基础知识
  8. Binary Tree Paths leetcode
  9. 程序哲学how to make love,简称 html
  10. Hibernate 马上入门(二)