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