离子滑动循环技巧 - 不更新

Posted 2023-01-13

我试图在ionic2中推出一个“技巧”，如下所示： - 我有一个幻灯片设置循环。 - 滑动幻灯片时，我会增加或减少变量 - 该变量将导致幻灯片中显示不同的数据。

通过这种方式，我可以获得幻灯片组件的完整UI体验，而无需硬编码或预加载所有其他幻灯片。例如，假设您在白天查看数据，我希望能够来回滑动以查看前几天的数据。鉴于此更改，我将重新加载相关的日期数据。

它几乎可以工作，只是在循环时滑块似乎没有正确刷新。看看这个http://plnkr.co/edit/VlxrNO7I6sqLGHsLdB9R?p=preview

<ion-slides loop="true" (ionSlidePrevEnd)="slideChanged(-1)" (ionSlideNextEnd)="slideChanged(1)">
   <ion-slide>Slidenewval
   Test 
   </ion-slide>
 </ion-slides>
</ion-content>

调节器

export class HomePage 

  appName = 'Ionic App';
  newval: number = 0;
  constructor(public navController: NavController)  

   slideChanged(step: number) 
        this.newval = this.newval + step;
   

如果你来回滑动，文字不会改变。它应该增加或减少，例如幻灯片1，幻灯片2等...但是做一些滑动，然后只需轻扫一下滑动并稍微移动它，然后标签刷新，以便为您提供正确的值！它几乎就像是因为我正在循环 - 所有显示的都是原始幻灯片值而不是更新的值，直到我点击幻灯片上的某个位置使其刷新。

所以底线我认为这是一个错误？有没有办法可以通过编程方式触发这种“刷新”行为？

谢谢

答案

您好，将home.page.html的代码更改为：

 <ion-slides loop="true" (ionSlidePrevEnd)="slideChanged(-1)" (ionSlideNextEnd)="slideChanged(1)">
   <ion-slide *ngFor="let item of items">Slide newval
       <ion-list>
         item
       </ion-list> 
   </ion-slide>
 </ion-slides>

我在plunker中测试了它，当你滑动时内容会改变。为每个ngFor而不是在ion-slide内做ion-slide

另一答案

尝试这种离子3

<ion-slides loop="true" autoplay="1" speed="6000">
   <ion-slide>Slide A</ion-slide>
   <ion-slide>Slide B</ion-slide>
   <ion-slide>Slide C</ion-slide>
</ion-slides>