解决ionic2/ionic3轮播图切换页面或者点击过后不自动轮图

最新推荐文章于 2018-09-05 09:45:31 发布

阿龙sir

最新推荐文章于 2018-09-05 09:45:31 发布

阅读量1.2k

点赞数

分类专栏： ionic3

本文链接：https://blog.csdn.net/qq_36171431/article/details/79500145

版权

ionic3 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

本文介绍了解决Ionic2/Ionic3应用中轮播图在页面切换后停止自动播放的问题。通过使用@ViewChild装饰器获取Slides组件引用，并在ionViewWillEnter和ionViewWillLeave生命周期钩子中分别启动和停止自动播放。

摘要由CSDN通过智能技术生成

我们在ionic2/ionic3开发的过程中会出现切换页面或者滑动切换轮播图出现轮播图不再轮播的情况,这其实需要一些配置.
首先在运用到轮播图的component中引入

import {ViewChild } from '@angular/core';

import { Slides } from 'ionic-angular';

然后

  @ViewChild(Slides) slides: Slides;
//解决切换其他页面回去轮播图不动问题
ionViewWillEnter(){
  this.slides.startAutoplay();
}
ionViewWillLeave(){
  this.slides.stopAutoplay();
}

附轮播图自动轮图的api

 <ion-slides pager autoplay="600" speed="800" loop="true" autoplayDisableOnInteration="true">

            <ion-slide>
                
            </ion-slide>

        </ion-slides>