离子幻灯片 - 在之前和之后动态添加幻灯片 [英] 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屋！