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

我们都知道Ionic3为我们提供了一套丰富易用的UI组件库，然而凡事是都有不完美之处，今天我们来看一下ionic3 slides组件在实现轮播功能时候的小问题。

先开UI小姐姐给到的3张美美哒效果图

接下来是home.html下的组件使用

<div class="slide-wrap">

<ion-slides pager loop="true" autoplay="3000" >

<ion-slide>

<h1><img src="assets/imgs/banner.png"></h1>

</ion-slide>

<ion-slide>

<h1><img src="assets/imgs/banner2.png"></h1>

</ion-slide>

<ion-slide>

<h1><img src="assets/imgs/banner3.png"></h1>

</ion-slide>

</ion-slides>

我们看标签ion-slides上的属性配置 pager loop="true" autoplay="3000"

解析一下

其中标签ion-slides上是属性 page表示轮播图开启显示当前页码，loop="true"表示开启循环播放 autoplay="3000"表示每个3秒钟自动播放一次。

根据我们的需求，按照文档配置属性后，下面就是见证奇迹的时候了。。。轮播图上的小点出现了，也能循环轮播了，并且每个3秒后还会自动轮播-- perfect

然而正当你兴高采烈、自信满满的拿起手机准备向小伙伴们炫耀或者向产品经理邀功的路上一不小心用你那高贵的小金手指滑动了轮播图时。。整个世界突然安静了下来，

What！！怎么不动了？轮播怎么卡翔了？手机突然坏了？不会是出bug了吧？。。不相信的你，于是又借了后端小哥哥的手机看一下。。发现还是一样的问题：可以3秒钟之后自动轮播，也可以循环播放。。

but，当你用手指触摸一下轮播，让它播到下一页后。于是你便在那里小心翼翼的患得患失的默默的数着；’1,2,3,4,5’，这么还不自动播放？再次刷新，重复之前的操作，12345，怎么还是不播放呢。

于是答案肤之欲出：’啊！！出bug了！’。

‘趁着没人发现,赶紧偷偷的改掉’。

于是乎历经千辛万苦的查阅文档，各大论坛求助，终于被你找到了破解之法：

首先第一步：想要修改轮播图的问题，你得先找到轮播元素

其次第二步：在合适的时机做针对的事

接下来重点来了，请看代码

在home.ts文件下

1.导入ViewChild ，Slides 并通过@ViewChild匹配到组件 Slides元素

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

import { Slides } from 'ionic-angular';

@ViewChild(Slides) slides: Slides;

2.在ionViewDidEnte生命周期里设置该参数 autoplayDisableOnInteraction 为false

ionViewDidEnter() {

this.slides.autoplayDisableOnInteraction = false;

}

完整home.ts代码

import { Component,ViewChild } from '@angular/core';
import { NavController,Slides } from 'ionic-angular';
import {UserBaseInfoPage} from '../user-base-info/user-base-info'
import {LoginPage} from '../login/login'
import {RestProvider} from '../../providers/rest/rest'
import { Storage } from '@ionic/storage'
// @IonicPage()
@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  @ViewChild(Slides) slides: Slides;
  constructor(public navCtrl: NavController,
  public rest: RestProvider,
  public storage: Storage) {

  }
  ionViewWillEnter() {
    this.checkToken()
  }
  ionViewDidEnter() {
    //修复轮播手动滑动后不能自动轮播问题
    this.slides.autoplayDisableOnInteraction = false; 
    console.log(this.slides)
  }
  checkToken () {
    var api='Main/MainQuest?needload'; //验证token接口
    this.storage.get('token').then((val) => {
      var params = {
        token: val
      }
      if (!val) {
        this.navCtrl.push(LoginPage);
        return
      }
      this.rest.doPost(api,params, (data)=> {
     
        if(!data.issuccess) {
          this.navCtrl.setRoot(LoginPage);
        }
      })
    })
  }
 
  gotoUserInfo() {
    this.navCtrl.push(UserBaseInfoPage);
  }
}

View Code

再次调试一下，，完美。。Over

观看线上效果可以微信关注二维码，通过菜单栏ETC业务进入首页即可观看