ionic学习使用笔记 slide 组件的使用

 

开始做的时候,遇到了个要用ionic实现

有一系列的序列需要展示,但是当前页面上只能展示一小部分,剩余的在没有出现时是隐藏的,还得能滑动出现,但是又不能有滚动条。

之前使用jQuery来实现的话,其实就是一个向左滑动的图片切换。

想着这个功能其实还是蛮常见的,ionic的framework应该能实现。然后就查看了一下文档,发现slides是可以实现的。

一开始直接粘贴了文档里面的代码,想着能自己直接修改样式来实现,设置slide宽度为20%,每次可展示5个序列。但是这样修改的话,使用this.slides.currentIndex获取到的值,是当页的值,而不是希望的slide的序列。

然后不得不仔细查看文档,然后就看到了这么个属性

slidesPerView number

Slides per view. Slides visible at the same time. Default: 1.

使用方法如下:

this.slides.slidesPerView = 5;

页面上就可以同时展现5个序列了。

其他属性如下:

Attr Type Details 中文
autoplay number

Delay between transitions (in milliseconds). If this parameter is not passed, autoplay is disabled. Default does not have a value and does not autoplay. Default: null.

是否自动播放

centeredSlides boolean

Center a slide in the middle of the screen.

在页面居中

control Slides

Pass another Slides instance or array of Slides instances that should be controlled by this Slides instance. Default: null.

 
dir string

If dir attribute is equal to rtl, set interal _rtl to true;

设置滚动的方向,从左还是从右

direction string

Swipe direction: 'horizontal' or 'vertical'. Default: horizontal.

水平还是竖直方向的滚动

effect string

The animation effect of the slides. Possible values are: slidefadecubecoverflow or flip. Default: slide.

切换的方式

initialSlide number

Index number of initial slide. Default: 0.

初始状态从第几个slide开始

loop boolean

If true, continuously loop from the last slide to the first slide.

滚动到最后一个slide时是否切换到第一个

pager boolean

If true, show the pager.

是否在下方展示当前的序列。即一般图片切换时的下方的圆点

paginationType string

Type of pagination. Possible values are: bulletsfractionprogress. Default: bullets. (Note that the pager will not show unless pager input is set to true).

与上面一项对应,设置其格式

parallax boolean

If true, allows you to use "parallaxed" elements inside of slider.

 
slidesPerView number

Slides per view. Slides visible at the same time. Default: 1.

设置每次展现几个slide

spaceBetween number

Distance between slides in px. Default: 0.

slide的间距

speed number

Duration of transition between slides (in milliseconds). Default: 300.

滚动速度

zoom boolean

If true, enables zooming functionality.

https://ionicframework.com/docs/api/components/slides/Slides/#resize

ionic slide组件使用的更多相关文章

  1. 好的组件,无须太复杂 – KISSY Slide 组件简介

    KISSY Slide 组件首页:http://gallery.kissyui.com/slide/1.1/guide/index.html V1.1 New Featurs Slide是一个幻灯切换 ...

  2. Ionic 常用组件解析

    Ionic 常用组件解析 $ionicModal(弹出窗口): //创建一个窗口 //此处注意目录的起始位置为app $ionicModal.fromTemplateUrl('app/security ...

  3. ionic学习使用笔记(二) slide 组件的使用

    开始做的时候,遇到了个要用ionic实现 有一系列的序列需要展示,但是当前页面上只能展示一小部分,剩余的在没有出现时是隐藏的,还得能滑动出现,但是又不能有滚动条. 之前使用jQuery来实现的话,其实 ...

  4. 如何把一个vue组件改为ionic/angular组件

    同是mvvm框架,他们之间是很相似的,如何你已经熟悉其中的一个,那么另一个也就基本上也就会的差不多了. 一.动态属性.值.事件绑定 vue中使用v-bind:或者之间分号:进行绑定 ng中左括号[]进 ...

  5. Vue2 轮播图组件 slide组件

    Vue2原生始轮播图组件,支持宽度自适应.高度设置.轮播时间设置.左右箭头按钮控制,圆点按钮切换,以及箭头.圆点按钮是否显示. <v-carousel :slideData="slid ...

  6. ionic创建组件、页面或者过滤器

    ionic可以直接 用命令来创建组件.页面或者过滤器. 在ionic项目根目录打开命令窗口.输入下列命令: ionic g page pageName //创建新页面 ionic g componen ...

  7. 观《phonegap第三季 angularjs+ionic视频教程 实时发布》学习笔记(三)

    十五.ionic路由 1.ionic中内联模板介绍 使用内联模板内联模板的使用,常见的有几种情况.(1) 使用ng-include指令可以利用ng-include指令在HTML中直接使用内联模板,例如 ...

  8. [转]Ionic系列——CodePen上的优秀Ionic_Demo

    本文转自:http://my.oschina.net/u/1416844/blog/514361?fromerr=bbFC5JIl 案例网站 Slidebox with Dynamic Slides ...

  9. BizTalk动手实验(十一)自定义开发管道组件

    1 课程简介 通过本课程熟悉自定义开始管道组件的流程.各组件接口的功能作用以及自定义管道. 本场景为开发一个消息ZIP压缩的发送管道组件. 2 准备工作 1. 熟悉管道组件各阶段组成 2. 下载Ion ...

随机推荐

  1. ajax异步加载分页评论带点赞功能

    <script type="text/javascript" src="__ROOT__/Index/Tpl/Public/js/jquery.js"&g ...

  2. MySQL: InnoDB的并发控制,锁,事务模型

    一.并发控制 为啥要进行并发控制? 并发的任务对同一个临界资源进行操作,如果不采取措施,可能导致不一致,故必须进行并发控制(Concurrency Control). 技术上,通常如何进行并发控制? ...

  3. 【FAQ】P3. 为什么 torch.cuda.is_available() 是 False

    为什么 torch.cuda.is_available() 是 False torch.cuda.is_available(),这个指令的作用是看,你电脑的 GPU 能否被 PyTorch 调用. 如 ...

  4. 手写spring事务框架, 揭秘AOP实现原理。

    AOP面向切面编程:主要是通过切面类来提高代码的复用,降低业务代码的耦合性,从而提高开发效率.主要的功能是:日志记录,性能统计,安全控制,事务处理,异常处理等等. AOP实现原理:aop是通过cgli ...

  5. nginx在windows下配置反向代理

    转自:https://blog.csdn.net/comeonyangzi/article/details/72466310 下载地址:http://nginx.org/download/ 下载后直接 ...

  6. idea解除版本控制

    解除版本控制删除两个文件: 1.idea中删除vcs.xml 2.在项目文件夹中删除.git 参考:https://blog.csdn.net/qq_37999340/article/details/ ...

  7. ukhj

    SQL解析顺序: 七种Join图:

  8. Django之cookie 和session

    ---恢复内容开始--- 一.cookie 前戏.cookie 的由来 由于http协议是无状态的 无法记录用户状态 cookie就是保存在客户端浏览器上的键值对 工作原理:当你登陆成功之后 浏览器会 ...

  9. ELK7.X中配置x-pack

    ELK7.X中配置x-pack 1.X-Pack简介 X-Pack是一个Elastic Stack的扩展,将安全,警报,监视,报告和图形功能包含在一个易于安装的软件包中.虽然elasticsearch ...

  10. verilog版插值

      开发环境:IDE:LIBERO 9.0(ACTEL公司的)芯片:AFS600 (BGA256),是混合系列的FPGA仿真软件:modelsim atcel 6.5d综合软件:synplify pr ...