Question

在app欢迎页面/幻灯片上使用ion-slides组件（4张幻灯片）。我需要能够让用户跳到最后一张幻灯片。文献说明Swiper API的离子幻灯片实现。我需要访问以下方法：mySwiper.slideTo(index, speed, runCallbacks);

如何实施的提示？

Answer 1

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

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 2

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

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

Answer 3

您可以使用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);
  }
}

Ionic 2幻灯片组件 - 如何访问Swiper API

3 个答案: