Ionic4--ion-slides轮播图遇到的问题

由于项目需求使用了原生组件 ion-slides 来实现轮播图，从此踏上了一条不归路

首先上HTML代码

<ion-slides #slide1 [options]="slidesOpts"  (click)="onClickSlide()">
     <ion-slide *ngFor="let item of bannerList">
        <img [src]="item.img" />
        <div class="bannerIntro">
          <div class="bannerIntroTitle">{{item.title}}</div>
          <div class="bannerIntroNum">{{item.num}}</div>
        </div>
     </ion-slide>
</ion-slides>

JS

public slidesOpts = {//轮播图属性
    speed: 500,
    autoplay: {
      delay: 5000,
      disableOnInteraction: false//这个属性很关键，拖动完自动播放
    },
    loop: true,
    zoom: false,
}

 

问题一：拖动手势和点击手势冲突

第一次实现点击 (click)="onClickSlide()" 是在 <ion-slide> 上添加的点击事件，刚开始好好的，可以点击，突然有一天点击事件没有响应了，查了很久没有发现原因，后来看网上把点击事件放到了大组件上，然后我就拖到上面。

但是拖到上面后 ，原本还有个 (ionSlideTouchEnd)="slideTouchEnd()" 事件，拖动结束自动播放。点击后两个事件会同时响应。

解决方法：在 options 的 autoplay 属性中设置 disableOnInteraction=false，不用监听事件也可以自动播放

 

问题二：点击事件获取页数

直接放代码，网上都有，用到现在没出现问题

 //轮播图点击
  onClickSlide() {
    this.slide1.getActiveIndex().then(index=>{
        console.log(index);
        let leng = this.bannerList.length;
        if (index>leng) {
          index=index-leng-1
        }else if(index == 0){
          index = leng-1;//第0张是最后一张图片
        }else{
          index--;
        }
        console.log(index);
        let item = this.bannerList[index];
        this.gotoNewsDetail(item)
    });

  }

问题三：离开页面后不自动播放

需要在页面中监听生命周期函数，离开的时候停止，回来的时候播放

ionViewDidEnter(){
    if (this.slide1) {
      console.log("ionViewDidEnter")
      this.slide1.startAutoplay()
    }
}

ionViewDidLeave(){
    console.log("ionViewDidLeave");
    this.slideStopAutoplay()
}

slideStopAutoplay(){
    if (this.slide1) {
      this.slide1.stopAutoplay()
    }
}

问题四：进入子页面的时候，生命周期函数没有响应

这个问题困扰了很久，今天终于找到了一个不太完美的解决办法

首先，我的轮播图是放在首页的，首页底部有四个tabs，当你进入子页面的时候，生命周期函数是不走的，被 tabbar 拦截了，相当于是 tabs 整个大页面在切换，所以你可以在 tabs 中获取生命周期函数的响应

import { EventService } from '../service/event.service'; 

@ViewChild('TABS') tabs;


ionViewWillEnter() {
    
    let activateComponent = this.tabs.outlet.component;
    if (activateComponent instanceof MePage) {
      ///调用子页面方法
      activateComponent.subPageBack();
    }else if (activateComponent instanceof SchoolPage) {
      
    }else if (activateComponent instanceof FindPage) {
      
    }else if (activateComponent instanceof NoticePage) {
      activateComponent.refreshData();
    }
 }


ionViewDidLeave(){

    let tab = this.tabs.getSelected();
    if (tab=="school") {
      this.eventService.eventEmit.emit(this.eventService.KeySchoolEnterInChildPage,"school页面进入子页面")
    }
    // let activateComponent = this.tabs.outlet.component;
    // if (activateComponent instanceof MePage) {

    // }else if (activateComponent instanceof SchoolPage) {
    //   console.log("kskskskksks");
    //   // activateComponent.slideStopAutoplay();
    // }else if (activateComponent instanceof FindPage) {
      
    // }else if (activateComponent instanceof NoticePage) {
      
    // }
}

为什么 ionViewWillEnter 可以用 this.tabs.outlet.component 来判断，而 ionViewDidLeave 却要用通知呢，因为ionViewDidLeave不能用 component，不信可以自己试一下，打印出来的 component 是没有找到。

后面就简单了用通知告诉首页，你进到子页面了哦，然后 stop 轮播。返回时就直接继续播放。

 

在拼搏的大伙共勉之：长路漫漫，且行且珍惜~

--------------------------------------------------------------------------------------------------------------------

8月8日，更新问题

问题五：浏览器可以循环播放，原生包不能循环播放

查看Swiper文档

loop

设置为true 则开启loop模式。loop模式：会在原本slide前后复制若干个slide(默认一个)并在合适的时候切换，让Swiper看起来是循环的。 
loop模式在与free模式同用时会产生抖动，因为free模式下没有复制slide的时间点。

注意红字，在原本基础上覆制若干个slide，可是在ionic的ng-for中时，异步加载的数据都还没有返回时，就先加载了Swiper组件并复制了sliper

解决方法：*ngIf="bannerList.length" 判断数组有数据再加载，完美解决