web-dev-qa-db-ja.com

Ionic 2 Slides Component-SwiperAPIにアクセスする方法

アプリのウェルカムページ/スライドでイオンスライドコンポーネント（4スライド）を使用する。ユーザーが最後のスライドにスキップする機能が必要です。ドキュメントによると、 Swiper API のイオンスライドの実装。次のようなメソッドにアクセスする必要があります：mySwiper.slideTo(index, speed, runCallbacks);

実装方法のヒント？

ionic-frameworkionic2
9
Steve Harbick

Optionsプロパティ内で関数を渡すことができます。

元の回答 。

@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 をご覧ください。

8
Flow

カスタムディレクティブのない単純なソリューションを探している場合は、これを試すことができます

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

あなたはあなたのスワイパーでサービスを作ることができます

@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);
  }
}
0
Raphael