Question

我使用Swonic（ion-slide）和Ionic，但是当我在每个幻灯片页面中创建一个带循环：true和ng-repeat的滑块时，ng-repeat乘以幻灯片的数量幻灯片＆＃34; swiper-slide-duplicate＆＃34;为循环。

示例：https://codepen.io/clementdev/pen/qNxryJ

我创建了一个带有ng-repeat的滑块，用于查看每张幻灯片上的所有颜色类，但在两张幻灯片上，所有内容都乘以十（幻灯片数量）。

<ion-slides options="data.sliderOptions" slider="data.sliderDelegate">
 <ion-slide-page ng-repeat="bgColor in data.bgColors">
  <div class="box {{bgColor}}">
    <p ng-repeat="color in data.bgColors">color class : {{color}}</p>
  </div>
 </ion-slide-page>
</ion-slides>

我知道，我需要这个幻灯片重复循环，但我不明白为什么有重复所有内容并乘以幻灯片的数量。

感谢您的帮助。

Answer 1

我知道这是一个较老的问题，大多数人都使用离子2。但如果你仍然在离子1，你去：

如果您updateLoop(); duplicate-slide自动滑动到real slide，duplicate slide离子会起作用。但是当你滑动而不是释放（仍然保持滑动）时，它会显示旧内容的副本。

要解决此问题 - 如果我到达最后一张幻灯片，我会使用real slide的内容更新this.$scope.$on("$ionicSlides.slideChangeStart", (event, data) => { // assume i just have 3 slides and update it's content after each slide through bindings, to simulate infinite slides if (data.slider.activeIndex === 3) { // wait with copy until bindings are updated this.$timeout(() => { let originals = document.querySelectorAll('[data-swiper-slide-index="0"]'); let duplicates = document.getElementsByClassName('swiper-slide-duplicate'); duplicates[1].innerHTML = originals[0].innerHTML; }); } });。

Time.deltaTime

离子Swiper-ng-repeat with loop

1 个答案: