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

Posted baimeishaoxia

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了解决ionic2/ionic3轮播图切换页面或者点击过后不自动轮图相关的知识,希望对你有一定的参考价值。

我们在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>

autoplay:自动轮播间歇时间;speed:切换轮播图速度;

以上是关于解决ionic2/ionic3轮播图切换页面或者点击过后不自动轮图的主要内容,如果未能解决你的问题,请参考以下文章

原生 js 左右切换轮播图

在Vue中使用Swiper轮播图同时解决点击轮播图左右切换按钮不生效的问题同时将轮播图抽离出为一个公共组件

原生js实现轮播图

解决纵向滚屏导致的轮播图异常

react-swipeable-views轮播图实现下方的切换点控制组件

原生js解决简单轮播图的切换