Question

是否有使用此http://framework7.io/docs/swiper.html构建无限Swiper（如Tinder）？

这个想法是在最后一张幻灯片处于“活动状态”时添加一张新幻灯片，但我无论如何都无法找到它。

Answer 1

我认为您可以通过使用追加功能并在没有更多幻灯片的情况下附加您的内容来实现。像无限滚动的东西，但有一些不同的代码。

例如：

<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

swiper插件拥有自己的网站，提供更多文档。

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>')
});

Framework7中的无限Swiper

2 个答案: