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

Question

您好，我正在使用 ngFor 创建一组 3 张幻灯片，同时从中间开始，所以我保证能够在开始时向左或向右滑动。

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

但我在开头添加幻灯片时遇到了问题。如果我执行与上述相同的操作并使用例如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

对于想知道为什么这不适用于 Ionic 4 的您，只需在 typescript 组件上添加一些更改

以下代码适用于 IONIC 4：

ionSlideNextEnd(){
  if(this.firstLoad) {
    // Since the initial slide is 1, prevent the first 
    // movement to modify the slides
    this.firstLoad = false;
    return;
  }

  console.log('Next');
  this.daySlider.getActiveIndex().then(idx=>{
      let newIndex=idx
      console.log(newIndex)
      newIndex--;
      this.numbers.push(this.numbers[this.numbers.length - 1] + 1);
      this.numbers.shift();

      // Workaround to make it work: breaks the animation
      this.daySlider.slideTo(newIndex, 0, false);

      console.log(`New status: ${this.numbers}`);
  });


}

ionSlidePrevEnd(){
console.log('Prev');
this.daySlider.getActiveIndex().then(idx=>{
    let newIndex=idx
    console.log(newIndex)
    newIndex++;
    this.numbers.unshift(this.numbers[0] - 1);
    this.numbers.pop();

    // Workaround to make it work: breaks the animation
    this.daySlider.slideTo(newIndex, 0, false);

    console.log(`New status: ${this.numbers}`);
});
}

或者更简单，您可以删除 Active Index 的 getter，使用 Ionic 4 的以下代码：

ionSlideNextEnd(){
    if(this.firstLoad) {
        this.firstLoad = false;
        return;
    }else{
        this.numbers.push(this.numbers[this.numbers.length - 1] + 1);
        this.numbers.shift();

        // Workaround to make it work: breaks the animation
        this.daySlider.slideTo(1,0,false);
        this.monthViewData.selectedTime=new Date(this.monthViewData.selectedTime.setDate(this.monthViewData.selectedTime.getDate()+1));
        this.eventSource = this.tmp_events.filter((item)=>{
            if(item.startTime >= this.monthViewData.selectedTime.setHours(0,0,0,0) && item.endTime < this.monthViewData.selectedTime.getTime()){
                return item;
            }
        });
    }

}

ionSlidePrevEnd(){

    this.numbers.unshift(this.numbers[0] - 1);
    this.numbers.pop();

    this.daySlider.slideTo(1,0,false);
    this.monthViewData.selectedTime=new Date(this.monthViewData.selectedTime.setDate(this.monthViewData.selectedTime.getDate()-1));
    this.eventSource = this.tmp_events.filter((item)=>{
        if(item.startTime >= this.monthViewData.selectedTime.setHours(0,0,0,0) && item.endTime <= this.monthViewData.selectedTime.getTime()){
            return item;
        }
    });
}

Answer 2

您可以通过使用来自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}`);
    }
}