Ionic Swiper - ng-repeat with loop

我使用Swiper（ion-slide）和Ionic，但是當我在每個幻燈片頁面內創建一個帶循環：true和ng-repeat的滑塊時，ng-repeat會乘以數字的幻燈片只在幻燈片「swiper-slide-duplicate」的循環中。Ionic Swiper - ng-repeat with loop

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

我在每張幻燈片，但是，兩個滑動式兩份一切所有的顏色類創建一個NG重複一個滑塊的觀點是乘以十（號幻燈片）。

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

我知道，我需要循環這張幻燈片重複的，但我不明白爲什麼會出現重複的所有內容，並通過幻燈片的數量倍增。

感謝您的幫助。

來源

2016-07-20 clementdev

我有同樣的問題。由於由ng-repeat創建的元素在其上設置了ng-repeat生成新元素，所以條目的重複發生。當Swiper複製這個頁面來完成循環時，角度將每個元素解釋爲一個新的循環。這就是爲什麼每個元素都會被複制的次數與原始循環中的元素一樣多。 – RKI

你解決了這個問題嗎？ – RKI

@RKI我發現了兩種解決方案，但它不是很「乾淨」的解決方案。我使用了一段代碼函數updateLoop（在文件ionic.bundle.js中），而不用調用createLoop。第一個解決方案（我在我的應用程序中使用）： https://codepen.io/clementdev/pen/ampyjA 我使用transitionStart和一段代碼在一個超時和safeApply內部，但幻燈片之間的過渡很快（10毫秒）比其他幻燈片。第二種解決方案： https://codepen.io/clementdev/pen/Xjpaqo 使用transitionEnd而沒有安全應用和超時，速度是相同的，但是當您滑動時可以看到更新數據。 – clementdev

我知道這是一個老問題，大多數人使用離子2。但如果你仍然在離子1這裏你去：

0123.離子如果你在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; 
     }); 
    } 
});

來源

2017-05-12 11:42:48 mnewmedia

Ionic Swiper - ng-repeat with loop

回答

相關問題