离子幻灯片 - 在之前和之后动态添加幻灯片

Question

嗨我正在使用ngFor在中间开始时创建一组3张幻灯片,所以我保证能够在开始时向左或向右滑动.

当我向右滑动时,我可以简单地听到reachEnd并将另一张幻灯片推到我正在循环的数组中.

但我在开头添加幻灯片时遇到问题.如果我像上面那样做并使用例如array.unshift()或spread来添加项目到开头,视图认为它在位置0并将视图捕捉到新幻灯片.

下面的代码可以工作,但它会将幻灯片更改设置为索引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>

任何帮助表示赞赏!

Answer 1

你可以通过使用ionSlideNextEnd和ionSlidePrevEnd来自的事件来做到这一点Slides.请看看这个工作的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}`);
    }
}