ionic3学习笔记(六)--轮播图

下面是轮播图的实现

1，页面模板

  <!-- 轮播:    autoplay:2s之后开始轮播    loop:循环播放    pager:分页器（小圆点） pager=true   -->  <ion-slides autoplay="2000" loop=true>    <ion-slide *ngFor="let item of slidesItems">      <img src="{{item.img}}" class="slide-image">    </ion-slide>  </ion-slides>

2，ts文件里对数据的初始化

 // 初始化slides  initSlides(){    this.slidesItems=[      {img:'assets/imgs/content-logo3.jpg'},      {img:'assets/imgs/content-logo4.jpg'},      {img:'assets/imgs/content-logo5.jpg' },      {img:'assets/imgs/content-logo6.jpg' },      {img:'assets/imgs/content-logo8.jpg'}    ];  }

3，css页面样式设计

 ion-slides{      width: 100%;      height: 25%;  }  .slide-image{      width: 100%;      height: 98%;   }

运行结果展示：

下面是一些slides的配置

!注意 如果想配置slide 只能这么配置 在html页面 <ion-slides pager [options]="mySlideOptions" > 只有pager是可以作为属性配置。 1、initialSlide ：初始的滑动数。                     默认：0 2、direction    ：滑动的方向。vertical || horizontal 默认：horizontal 3、loop         ：是否可以循环滑动                   默认：false 4、autoplay     ：是否自动播放                       默认：false 5、pager        ：是否显示页数小点点                 默认：false 6、speed        ：幻灯片过度的毫秒数                 默认：300ms  

方法 this.mySlide.getActiveIndex()     ：获取当前幻灯片的索引。 this.mySlide.getPreviousIndex()   ：获取上一个幻灯片的索引。 this.mySlide.length()             ：获取幻灯片的总数。 this.mySlide.isEnd()              ：判断幻灯片是否是最后一个。 this.mySlide.isBeginning()        ：判断幻灯片是否是第一个。 this.mySlide.getSlider()          ：返回一个 Object 也就是该幻灯片的实例。

参考文章：https://www.cnblogs.com/dandingjun/p/5562534.html