Question

我想做一个＆＃34;连续＆＃34; Ionic 3中的滑块。

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

请参阅此plunker作为问题的示例：

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

这是观点：

ChannelInboundHandlerAdapter

这是控制器：

从@ angular / core＆＃39;中导入{Component}; 从＆＃39; ionic-angular＆＃39;;

导入{NavController}

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

我怎样才能做到这一点？

谢谢！

Answer 1

如果您在浏览器检查器中查看，您会看到那些不起作用的是从最后一个循环后的第一个幻灯片，或者是从第一个循环后的最后一个幻灯片（反方向）），并且它们都具有类swiper-slide-duplicate，即它们是重复的，并且那些有效的不是重复的。

有时，在更改幻灯片时，您可以在短暂的时间内看到正确的值，因为副本会随原始内容一起更改。

似乎ionic尝试复制幻灯片，但是当使用角度绑定和更改检测时，复制可能会出现意外错误，使其完全不起作用。

起初，（在我的情况下，不是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）。

Answer 2

尝试此代码。使用幻灯片的realIndex

这是视图

this.general = [].concat(...Object.values(resp));

控制器部分

 <ion-slides loop="true" (ionSlideDidChange)="slideChanged($event)">
   <ion-slide *ngFor="let item of items">Slide {{newval}}
       <ion-list>
         <ion-item *ngFor="let item of items">
           Slide {{newval}} not changing
         </ion-item>
       </ion-list> 
   </ion-slide>
 </ion-slides>
</ion-content>

例如，请参阅

http://next.plnkr.co/edit/6o5cy8gClpBJv6iG?preview

从最后一个到第一个或从头到尾，Ionic 3幻灯片循环无法正常刷新

2 个答案: