ionic-framework - 从最后到第一或从第一到最后时，Ionic 3 幻灯片循环无法正确刷新

Question

我想在 Ionic 3 中制作一个“连续” slider 。

我使用 3 张幻灯片并更新每张幻灯片的内容。这是有效的，尽管当滑动最后一张幻灯片并循环回到第一张幻灯片时，新显示的幻灯片的内容不正确:显示所有静态数据，但未显示所有动态(绑定(bind))数据。您需要启动一个新的滑动操作(只需稍微拖动页面)才能显示数据。

将此 plunker 视为问题的示例:

https://plnkr.co/edit/YC9xiwH9hVtAmhUTO2Oc?p=preview

这是 View :

<ion-content padding>    
    slides:
    <ion-slides loop="true" (ionSlideDidChange)="slideChanged($event)">
        <ion-slide>
            0 {{data[0]?.title}}
        </ion-slide>
        <ion-slide>
            1 {{data[1]?.title}}
        </ion-slide>
        <ion-slide>
           2 {{data[2]?.title}}
        </ion-slide>
    </ion-slides>
</ion-content>

这是 Controller :

从'@angular/core'导入{组件}；从 'ionic-angular' 导入 { NavController };

@Component({
  selector: 'page-home',
  templateUrl: 'app/home.page.html'
})
export class HomePage {

  appName = 'Ionic App';

    slides: Slides;

    public data: MonthViewData[] = [];

    public date = new Date(Date.now());

    monthNames = ["January", "February", "March", "April", "May", "June",
        "July", "August", "September", "October", "November", "December"
    ];

    constructor() {
        this.data.push({title:'t0'});
        this.data.push({title:'t1'});
        this.data.push({title:'t2'});
    }

    slideChanged(slides: Slides) {
        this.slides = slides;
        return new Promise((resolve, reject) => {
            let scrollToNext = this.slides.getActiveIndex() > this.slides.getPreviousIndex();
            console.log(this.slides.getActiveIndex(), this.slides.getPreviousIndex());
            let currentSlideIndex: number = this.slides.getActiveIndex() - 1;
            if (currentSlideIndex > 2) {
                currentSlideIndex = 0;
            }
            if (currentSlideIndex < 0) {
                currentSlideIndex = 2;
            }
            let previousSlideIndex = currentSlideIndex - 1;
            let nextSlideIndex = currentSlideIndex + 1;
            if (previousSlideIndex < 0) {
                previousSlideIndex = 2;
            }
            if (nextSlideIndex > 2) {
                nextSlideIndex = 0;
            }
            if (this.slides.getActiveIndex() == 1 && this.slides.getPreviousIndex() == 0) {
                this.date = new Date(Date.now());
            } else {
                if (scrollToNext) {
                    this.date.setMonth(this.date.getMonth() + 1);
                } else {
                    this.date.setMonth(this.date.getMonth() - 1);
                }
            }
            console.log('active month', this.date);
            console.log('indexes', previousSlideIndex, '->', currentSlideIndex, '->', nextSlideIndex);
            this.data[currentSlideIndex].title = this.monthNames[this.date.getMonth()] + ' ' + this.date.getFullYear();
            this.data[previousSlideIndex].title = this.monthNames[this.date.getMonth() - 1] + ' ' + this.date.getFullYear();
            this.data[nextSlideIndex].title = this.monthNames[this.date.getMonth() + 1] + ' ' + this.date.getFullYear();
        })
    }
}

我怎样才能做到这一点？

谢谢!

Answer 1

如果您查看浏览器检查器，您会发现不起作用的是从最后一张幻灯片循环后的第一张幻灯片，或者从第一张幻灯片循环后的最后一张幻灯片(反向) ), 并且它们都有 swiper-slide-duplicate 类，也就是说，它们是重复的，而起作用的不是重复的。

有时，当您更改幻灯片时，您可以在一瞬间看到正确的值，因为副本已与原始幻灯片一起更改。

ionic 似乎试图复制幻灯片，但复制会在使用角度绑定(bind)和变化检测时产生意外错误，使其根本无法工作。

起初，(在我的例子中，不是 plunker 中的那个)，我认为是变化检测没有在我的组件中触发，并尝试了各种东西，比如 ngZone.run()、cd.markForChanges()、cd.detectChanges() 等等...

在我看来，当前的“修复”是当您需要动态变化检测(项目可以变化)时不使用 loop，而检测必须在幻灯片内部进行。

在我的例子中，我禁用了 loop 并使用了 autoPlay，然后我只是在幻灯片发生变化时调用 slides.startAutoplay()。

在你的情况下，它会在 slideChanged(slides: Slides) { ... slides.startAutoplay(); }

这不会解决您的问题，很难，因为在您的代码中，您希望在每张幻灯片中显示下个月，并使其看起来像有无限张幻灯片(在循环时始终更改下一张幻灯片)。此外，您似乎希望更改是手动的(由用户进行)。

我建议你寻找其他方法，因为我不知道什么时候可以解决。

打开的有几个问题:

https://github.com/ionic-team/ionic-v1/issues/129 (它在 v1 中，但问题是一样的。原始问题是 https://github.com/ionic-team/ionic/issues/6602，创建于 2016-05-21，差不多 2 年前)

https://github.com/ionic-team/ionic/issues/6515

https://github.com/ionic-team/ionic/issues/6843

https://github.com/ionic-team/ionic/issues/10890

https://github.com/ionic-team/ionic/issues/13582

(可能还有更多...)

也许在 Ionic4 中会得到解决，但我认为不会(至少现在不会)，所以我建议尝试另一种方法(而不是 ion-slides ) 在你的情况下。