在应用程序欢迎页面/幻灯片上使用离子幻灯片组件(4张幻灯片)。我需要用户跳到上一张幻灯片的能力。 Docs说离子幻灯片实现Swiper API。我需要访问如下方法:mySwiper.slideTo(index, speed, runCallbacks);
Ionic 2幻灯片组件 - 如何访问Swiper API
有关如何实施的提示?
在应用程序欢迎页面/幻灯片上使用离子幻灯片组件(4张幻灯片)。我需要用户跳到上一张幻灯片的能力。 Docs说离子幻灯片实现Swiper API。我需要访问如下方法:mySwiper.slideTo(index, speed, runCallbacks);
Ionic 2幻灯片组件 - 如何访问Swiper API
有关如何实施的提示?
您可以选择属性中传递一个函数。
@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。
,您可以拨打服务与你的组队,探索
@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 Slides实现的Swiper库? –
如果您正在寻找无定制指令,一个简单的解决方案,你可以试试这个
constructor(
private _app: IonicApp
){}
ngAfterViewInit() {
this._slider = this._app.getComponent('my-slider');
}
goToSlide(slideIndex){
this.slider.slider.slideTo(slideIndex);
}
我在找这个。 –