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

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


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(); /*请求数据完成后如果轮播图工作异常  这时候调用这句话 更新轮播图*/

  }
 
}




这就是ionic5远程请求数据生成的轮播图不自动轮播的使用方法,ionic5远程请求数据生成的轮播图不自动轮播就给大家先介绍到这里,希望对你有帮助

更多ionic5远程请求数据生成的轮播图不自动轮播的使用教程:https://www.itying.com/goods-1067.html