首页 > 代码库 > ionic学习使用笔记（二） slide 组件的使用

ionic学习使用笔记（二） slide 组件的使用

2024-11-12 16:23:39   204人阅读

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

其他属性如下：

AttrTypeDetails中文
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

 

ionic学习使用笔记（二） slide 组件的使用


联系
我们