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

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();
  }

猜你喜欢

转载自blog.csdn.net/samll_cat/article/details/80844817
今日推荐