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%;
    }
  }