欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

ionic开发的过程中遇到的问题及解决方法的整理(一)

程序员文章站 2022-06-04 14:29:59
...

ionic 轮播无效问题


1.slides轮播图手动滑动后无法自动播放问题

在轮播所在的ts文件中引入ViewChild,Slides

import { Component, ViewChild } from '@angular/core';
import { Slides } from 'ionic-angular';

之后通过@ViewChild匹配到组件 Slides元素

 @ViewChild(Slides) slides: Slides;

最后在ionViewDidEnte生命周期里设置该参数 autoplayDisableOnInteraction 为false

ionViewDidEnter() {
    this.slides.autoplayDisableOnInteraction = false;
  }

2.ion-slides切换页面返回后轮播失效问题

自动播放的Slides调转到其他页面一定时间后(超过设置的播放时间),再回到此页面,自动播放失效。所以可以在离开页面时停止自动播放,再次进入时再次启动。

同样首先在轮播所在的ts文件中引入ViewChild,Slides,并通过@ViewChild匹配到组件 Slides元素

import { Component, ViewChild } from '@angular/core';
import { Slides } from 'ionic-angular';
 @ViewChild(Slides) slides: Slides;

之后在进入页面时用 ionViewDidEnter生命周期启动轮播

  ionViewDidEnter(){
          this.slides.startAutoplay();
    }

最后在离开页面时调用ionViewDidLeave生命周期停止轮播

 ionViewDidLeave(){ 
      this.slides.stopAutoplay();
  }
相关标签: ionic ion-slides