ionic4 slides轮播图组件的使用

Ionic4.x中的轮播图组件是基于swiper插件,所以配置slides的属性需要在swiper的api中找,Swiper Api:http://idangero.us/swiper/api/


ionic4 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