ionic4远程请求数据生成的轮播图不自动轮播

Ionic4.x中的轮播图组件是基于swiper插件，所以配置slides的属性也是基于swiper的，但是有时候我们会发现远程请求数据生成的轮播图不会自动轮播。下面我们就看看ionic4远程请求数据生成的轮播图不会自动轮播如何解决。

1、给轮播图定义一个唯一id     #slide2  代码如下

  <ion-slides pager="true" #slide2>
    <ion-slide>
      <img src="/assets/slide02.png" alt="">
    </ion-slide>

    <ion-slide>
      <img src="/assets/slide01.png" alt="">
    </ion-slide>

  </ion-slides>

2、引入ViewChild 并获取dom节点

import { Component, OnInit,ViewChild} from '@angular/core';

@ViewChild('slide2') slide2;

3、请求数据完成后调用  this.slide2.update()  更新轮播图

如果我们想手动增加或者减少轮播图，我们也需要调用  this.slide2.update()  来更新轮播图。这样的话新增或者减少的轮播图才可以自动轮播。

完整业务逻辑代码：

import { Component, OnInit,ViewChild} from '@angular/core';

@Component({
  selector: 'app-slides',
  templateUrl: './slides.page.html',
  styleUrls: ['./slides.page.scss'],
})
export class SlidesPage implements OnInit { 


  @ViewChild('slide2') slide2;


  slideOpts = {
    effect: 'flip',  //轮播效果
    autoplay: {
      delay: 2000,
    },
    loop:true
  };
  constructor() { }

  ngOnInit() {
  }


  slideUpdate(){

    this.slide2.update(); /*请求数据完成后如果轮播图工作异常  这时候调用这句话 更新轮播图*/

  }
 
}