2

我正在尝试在 ionic2 中实现以下“技巧”： - 我将一张幻灯片设置为循环播放。- 滑动幻灯片时，我增加或减少一个变量 - 该变量将导致不同的数据显示在幻灯片中。

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

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

<ion-slides loop="true" (ionSlidePrevEnd)="slideChanged(-1)" (ionSlideNextEnd)="slideChanged(1)">
   <ion-slide>Slide{{newval}}
   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 等...但是做几次滑动而不是滑动，只需单击幻灯片并稍微移动它，然后标签会刷新以提供正确的值！几乎就像是因为我在循环播放 - 所有显示的是原始幻灯片值而不是更新值，直到我单击幻灯片上的某个位置导致它刷新。

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

谢谢

4

2 回答 2

-2

试试这个离子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>
于 2018-09-15T13:05:30.297 回答
-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

于 2017-02-14T01:24:55.747 回答