Компонент Ionic 2 Slides-как получить доступ к API Swiper

использование компонента ion-slides (4 слайда) на странице приветствия приложения/слайды. Мне нужна возможность для пользователя пропустить последний слайд. Документы говорят, что реализация Ion-слайдов Swiper API. Мне нужно получить доступ к таким методам, как:mySwiper.slideTo(index, speed, runCallbacks);

советы о том, как реализовать?

9
ionic-framework ionic2

3 ответов

вы можете передать функцию в свойстве 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);
  }
}

для дальнейших опций посмотрите на API для подметалка.

7

Если вы ищете простое решение без специальных указаний, вы можете попробовать это

  constructor(
    private _app: IonicApp
  ){}
  ngAfterViewInit() {
    this._slider = this._app.getComponent('my-slider');
  }
  goToSlide(slideIndex){
    this.slider.slider.slideTo(slideIndex);
  }
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);
  }
}
0