ionic5 slides轮播图组件的使用
ionic5.x中的轮播图组件是基于swiper插件,所以配置slides的属性需要在swiper的api中找,Swiper Api:http://idangero.us/swiper/api/
ionic5 slides轮播图组件的基本用法
1、在你的模板文件中配置如下代码:
<ion-slides pager="true" [options]="slideOpts">
<ion-slide>
<h1>Slide 1</h1>
</ion-slide>
<ion-slide>
<h1>Slide 2</h1>
</ion-slide>
<ion-slide>
<h1>Slide 3</h1>
</ion-slide>
</ion-slides>
2、在你的业务逻辑文件中配置slides的属性:
export class SlidesPage implements OnInit { slideOpts = { effect: 'flip', speed: 400, loop:true, autoplay: { delay: 2000 } }; }
这样就可以实现一个轮播图,但是大家会发现轮播图刚开始会自动轮播,当用户手动滑动一会后,轮播图就不会自动轮播图了。
解决方案查看下面帖子。
http://www.ionic.wang/article-index-id-152.html
这就是ionic5 slides轮播图组件的使用的使用方法,ionic5 slides轮播图组件的使用就给大家先介绍到这里,希望对你有帮助
更多ionic5 slides轮播图组件的使用的使用教程:https://www.itying.com/goods-1067.html