離子幻燈片 - 在

Question

之前和之後動態添加幻燈片嗨我使用ngFor在中間啓動時創建一組3張幻燈片，因此我保證能夠在開始時向左或向右滑動。

當我向右滑動時，我可以簡單地聆聽reachedEnd，並將另一張幻燈片推送到正在循環的陣列。

但我在添加幻燈片到開始時遇到問題。如果我按照上面的方法做，並使用例如array.unshift（）或傳播以將項目添加到開頭，視圖認爲它位於位置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

您可以使用Slides中的ionSlideNextEnd和ionSlidePrevEnd事件來完成此操作。請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}`); 
    } 
}