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: `slide`, `fade`, `cube`, `coverflow` 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: `bullets`, `fraction`, `progress`. 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