Framework7中的无限Swiper

Question

有无论如何通过使用此http://framework7.io/docs/swiper.html来构建无限Swiper（如Tinder）？

这个想法是当最后一张幻灯片“活跃”时添加一张新幻灯片，但无论如何我无法找到。

Answer 1

我认为你可以通过使用append函数来做到这一点，并追加你的内容，如果没有更多的幻灯片。像无限滚动但有一点不同的代码。

例如：

<div class="swiper-container"> 
<div class="swiper-wrapper"> 
    <div class="swiper-slide"><span>Slide 1</span></div> 
    <div class="swiper-slide"><span>Slide 2</span></div> 
    <div class="swiper-slide"><span>Slide 3</span></div> 
    <div class="swiper-slide"><span>Slide 4</span></div> 
</div> 
</div> 

JS

var html = ''; 
for (var i = lastIndex + 1; i <= lastIndex + itemsPerLoad; i++) { 
    html += '<div class="swiper-slide"><span>Slide '+i+'</span></div>'; 
} 
// Append new items 
$$('.swiper-wrapper').append(html); 

Answer 2

的刷卡插件有它自己的网站有很多更多的文档。

http://idangero.us/swiper/api/

你也许可以使用onReachEnd(swiper)事件，并在那里加入新的幻灯片与mySwiper.appendSlide('<div class="swiper-slide">Slide 10"</div>')

var mySwiper = new Swiper('.swiper-container'); 

mySwiper.on('onReachEnd', function (swiper) { 
    swiper.appendSlide('<div class="swiper-slide">New Slide</div>') 
});