Ionic 2 Slides 组件 - 如何访问 Swiper API

Question

在欢迎应用上使用 ion-slides 组件（4 张幻灯片）page/slides。我需要让用户跳到最后一张幻灯片的能力。文档说 Swiper API 的 ion-slides 实现。我需要访问如下方法：mySwiper.slideTo(index, speed, runCallbacks);

关于如何实施的提示？

Answer 1

您可以使用 Swiper 提供服务

@Injectable()
export class HomeSwiper {
  swiper = null;

  initSwiper(selector) {
    this.swiper = new Swiper(selector, {
      pagination: '.home-swiper-pagination',
      speed: 400,
      spaceBetween: 100,
      nextButton: '.swiper-button-next',
      prevButton: '.swiper-button-prev'
    });
  }

  goTo(index) {
    this.swiper.slideTo(index);
  }
}

并将其用于您的@Page

@Page({
  templateUrl: 'build/pages/home/home.html',
  providers: [HomeSwiper]
})
export class Home {
  constructor(private swiperService: HomeSwiper) {
    this.swiperService.initSwiper('.home-modal-swiper-container');
  }

  skipSlides() {
    this.swiperService.goTo(indexOfTheLastSlide);
  }
}

Answer 2

您可以在选项属性中传递函数。

Original answer.

@Component({
  selector: 'my-component',
  template: '<ion-slides [options]="options">
               <ion-slide>Slide1</ion-slide>
               <ion-slide>Slide2</ion-slide>
             </ion-slides>',
  directive: [IONIC_DIRECTIVES]
})
export class MyComponent {
  public slider: any;

  constructor() {
    this.options = {
      onlyExternal: false,
      onInit: (slides: any) =>
        this.slider = slides
    }
  }

  click() {
    this.slider.sliderNext(true, 250);
  }
}

有关更多选项，请查看 swiper api。

Answer 3

如果您正在寻找没有自定义指令的简单解决方案，您可以试试这个

  constructor(
    private _app: IonicApp
  ){}
  ngAfterViewInit() {
    this._slider = this._app.getComponent('my-slider');
  }
  goToSlide(slideIndex){
    this.slider.slider.slideTo(slideIndex);
  }

Ionic 2 Slides 组件 - 如何访问 Swiper API

Ionic 2 Slides Component - How to Access Swiper API

ionic-framework

ionic2