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

 

再次調試一下，，完美。。Over

觀看線上效果可以微信關注二維碼，通過菜單欄ETC業務進入首頁即可觀看