angular - Ionic slaytlar - slaytları önüne ve arkasına dinamik olarak ekle

Merhaba, ngFor kullanarak 3 slaytlık bir set oluşturuyorum ve ortadan başlamayı planlıyorum, böylece başlarken sola veya sağa kaydırabileceğimden emin oluyorum.

Sağa kaydırdığımda, basitçe reachedEnd'i dinleyebilir ve döngü yaptığım diziye başka bir kaydırma ekleyebilirim.

ama başa bir slayt eklemekle ilgili bir sorunum var. Yukarıdaki gibi yapıp örneğin array.unshift() veya bir öğeyi başa eklemek için spread kullanırsam, görüntü onun 0. pozisyonda olduğunu düşünüyor ve görünümü yeni slayta kaydırıyor.

Aşağıdaki kod çalışır, ancak slayt değişimini tekrar indeks 1'e animasyonlu şekilde yapar.

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>

Her türlü yardım takdir edilir!

Cevap #1

Bunu, Slides içindeki ionSlideNextEnd ve ionSlidePrevEnd olaylarını kullanarak yapabilirsiniz. Lütfen bu çalışan plunker'a bir göz atın

Manzara

<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>

Bileşen

@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}`);
    }
}

İlgili makaleler