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