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

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/Dan_2017/article/details/78889586

下面是轮播图的实现

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