ionic4学习笔记10-某东项目轮播图

ゝ一纸荒年。 2023-02-20 07:46 24阅读 0赞

1、页面组件定义

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3RvbmdsZV9kZW5n_size_16_color_FFFFFF_t_70][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3RvbmdsZV9kZW5n_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/2020062509435270.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3RvbmdsZV9kZW5n,size_16,color_FFFFFF,t_70