离子幻灯片 - 在

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