IONIC 四月 20, 2017

IONIC 3 使用sliders轮播时拖动后autoplay失效解决方法

文章字数 1.4k 阅读约需 1 mins. 阅读次数 0

我们先了解一下Ionic的Sliders

首先Ionic里面的sliders是用Swiper.js的第三方插件实现的, Ionic官方Sliders的文档里面只描述了可以直接写入html标签内的属性, 有很多高级属性是没有写在文档里面的.

要怎么改变sliders的其他属性呢?

那如果我们要用到Swiper的其他属性怎么办呢? Ionic 2.x 的时候我们是可以在options里面传入的, 但是升级Ionic 3.x.x 后sliders的options属性被移除了. 现在要改变sliders的属性我们要用到sliders类.

如何拖动轮播图后不让autoplay失效呢?

首先我们要引入viewChildSliders

import { ViewChild } from '@angular/core';
import { Slides } from 'ionic-angular';

然后使用ionViewWillEnter在进入页面前改变sliders的autoplayDisableOnInteraction属性

import { ViewChild } from '@angular/core';
import { Slides } from 'ionic-angular';

class MyPage {
  @ViewChild(Slides) slides: Slides;

  ionViewWillEnter() {
    this.slides.autoplayDisableOnInteraction = false; //禁止slider拖动后autoPlay失效
  }
}
0%