离子幻灯片 - 在之前和之后动态添加幻灯片 [英] Ionic slides - dynamically add slides before and after
问题描述
嗨我正在使用ngFor在中间开始时创建一组3张幻灯片,所以我保证能够在开始时向左或向右滑动。
Hi I'm using ngFor to create an set of 3 slides while starting in the middle so I'm guaranteed to be able to slide to left or right on start.
当我向右滑动时,我可以简单地听到reachEnd并将另一张幻灯片推送到我正在循环的数组。
When I slide right I can simple listen to the reachedEnd and push another slide to the array i'm looping.
但是我在添加幻灯片时遇到问题到了开头。如果我像上面那样做并使用例如array.unshift()或spread将项添加到开头,视图认为它位于位置0并将视图捕捉到新幻灯片。
but I have a problem with adding a slide to the beginning. If I do the same as above and use e.g. array.unshift() or spread to add an item to the beginning, the view think it's on position 0 and snaps the view to the new slide.
下面的代码将工作,但它将幻灯片更改动画回到索引1.
The code below would work but it animates the slide change back to index 1.
slide = [0,1,2] //example to loop
slideChanged(event) {
if(this.slides.isBeginning()){
this.slide = [this.slide[0]-1, ...this.slide];
this.slides.update();
this.slides.slideTo(1)
}
}
<ion-slides [initialSlide]="1" (ionSlideDidChange)="slideChanged($event)">
<ion-slide *ngFor="let item of slide">
<h1>Slide {{item}}</h1>
</ion-slide>
</ion-slides>
感谢任何帮助!
推荐答案
你可以通过 ionSlideNextEnd
和来自<$的 ionSlidePrevEnd
事件来做到这一点C $ C>幻灯片。请查看 这个工作的plunker
You can do that by using the ionSlideNextEnd
and ionSlidePrevEnd
events from the Slides
. Please take a look at this working plunker
视图
<ion-header>
<ion-navbar>
<ion-title>Dynamic slides Demo</ion-title>
</ion-navbar>
</ion-header>
<ion-content>
<ion-slides #slider (ionSlideNextEnd)="loadNext()" (ionSlidePrevEnd)="loadPrev()" [initialSlide]="1">
<ion-slide *ngFor="let n of numbers">
<h2>Current slide: {{n}}</h2>
</ion-slide>
</ion-slides>
</ion-content>
该组件
@Component({...})
export class HomePage {
@ViewChild('slider') private slider: Slides;
numbers = [0,1,2];
firstLoad = true;
constructor() {}
loadPrev() {
console.log('Prev');
let newIndex = this.slider.getActiveIndex();
newIndex++;
this.numbers.unshift(this.numbers[0] - 1);
this.numbers.pop();
// Workaround to make it work: breaks the animation
this.slider.slideTo(newIndex, 0, false);
console.log(`New status: ${this.numbers}`);
}
loadNext() {
if(this.firstLoad) {
// Since the initial slide is 1, prevent the first
// movement to modify the slides
this.firstLoad = false;
return;
}
console.log('Next');
let newIndex = this.slider.getActiveIndex();
newIndex--;
this.numbers.push(this.numbers[this.numbers.length - 1] + 1);
this.numbers.shift();
// Workaround to make it work: breaks the animation
this.slider.slideTo(newIndex, 0, false);
console.log(`New status: ${this.numbers}`);
}
}
这篇关于离子幻灯片 - 在之前和之后动态添加幻灯片的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!