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

Posted 2020-09-30 Viola_left

开始做的时候，遇到了个要用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