ionic4學習筆記10-某東項目輪播圖

1、頁面組件定義

<ion-content>
  <!--輪播圖
      #slide1 ： 爲組件ID
      [options]="slidesOpts"：對應ts中配置的對象slidesOpts，屬於組件屬性配置
      *ngFor="let item of slidesList" ：獲取後臺ts中傳遞進來的數據
      *(ionSlideTouchEnd)="slideTouchEnd()": 手動滑動結束後出發的方法
  -->
  <ion-slides pager="true" #slide1 [options]="slidesOpts" (ionSlideTouchEnd)="slideTouchEnd()">
    <ion-slide *ngFor="let item of slidesList">
        <img [src]="item.pic" />
    </ion-slide>
  </ion-slides>

</ion-content>

2、數據來源

    2.1 圖片已放入到src/assets文件下

    2.2 在tab1的ts文件中編輯邏輯

@ViewChild('slide1') slide1; //獲取頁面中id爲slide1的組件，前提需要在import中引入ViewChild

  //輪播圖的屬性
  public slidesOpts={
    speed:400,//一頁到下一頁的時間
    autoplay: { 
      delay: 2000,//多久輪播一遍
    },
    loop:true //是否循環
  }

  public slidesList:any[]=[];



  constructor(){
    //輪播圖片數據來源
    for(var i=1;i<=3;i++){
      this.slidesList.push({
        pic:'assets/slide0'+i+'.png',
        url:'',
      })
    }
  }
  //手動滑動完成
  slideTouchEnd(){
      this.slide1.startAutoplay();//設置爲自動輪播
  }

3、設置其CSS(在tab1的css文件中)

//輪播圖的Css控制圖片大小
  ion-slide{
  
    width: 100%;
    height: 150px;
    overflow: hidden;
    img{
      max-width: 100%;
    }
  }