我将 Swiper Slider 用于我使用 Phonegap 和 Framework 7 创建的混合应用程序。
每张幻灯片都是用通过 Ajax 调用带来的动态内容制作的。
问题是我在同一个页面中有两个滑块,当我到达它们的最后一张幻灯片时,开始出现一个巨大的空白区域,我们用手指滑动得越多,它就会创建更多的空白区域。
我会在这里留下一些印刷品和相关的代码。
我的 HTML 文件:
<div class="ementa-sobre pl30 mt60">
<h3 class="titulo-v1">Ementa <div class="circulo-pequeno"></div> <span class="info-complementar-titulo" id="numero-pratos"></span></h3>
<div class='swiper-container swiper-ementa-home'>
<div class='swiper-wrapper' id="slider-ementa-home">
</div>
</div>
</div>
<div class="eventos-sobre pl30 mt60">
<h3 class="titulo-v1">Eventos <div class="circulo-pequeno"></div> <span class="info-complementar-titulo" id="numero-eventos"></span></h3>
<div class='swiper-container swiper-eventos-home'>
<div class='swiper-wrapper' id="slider-eventos-home">
</div>
</div>
</div>
我的 JS 文件:
myApp.onPageInit('home', function (page) {
$(document).ready(function()
{
var ajaxurl3="myurl.php";
$.ajax({
type: "POST",
url: ajaxurl3,
success: function(data) {
$.each(data, function(i, field){
var id=field.id_categoria;
var nomeCategoria=field.nome_categoria;
var imgCategoria=field.img_categoria;
var string = "<div class='swiper-slide' style='background-image:url(https://pizzarte.com/app/img/ementa/"+imgCategoria+")'><a href='pratos.html?idcat="+id+"&cat="+nomeCategoria+"'><p>"+nomeCategoria+"</p></a></div>";
$("#slider-ementa-home").append(string);
})
},
complete: function (data) {
var mySwiper2 = myApp.swiper('.swiper-ementa-home', {
spaceBetween: 15
});
}
});
var ajaxurl4="myurl2.php";
$.ajax({
type: "POST",
url: ajaxurl4,
success: function(data) {
$.each(data, function(i, field){
var id=field.id_evento;
var nomeEvento=field.nome_evento;
var imgEvento=field.img_evento;
var string = "<div class='swiper-slide' style='background-image:url(https://pizzarte.com/app/img/eventos/"+imgEvento+")'><a href='eventos.html?idcat="+id+"&cat="+nomeEvento+"'><p>"+nomeEvento+"</p></a></div>";
$("#slider-eventos-home").append(string);
})
},
complete: function (data) {
var mySwiper3 = myApp.swiper('.swiper-eventos-home', {
spaceBetween: 15
});
}
});
});
})
印花:
页面加载时(一切正常):https://gyazo.com/42094ad145607579572eb550a2d22d28
滚动到最后一张幻灯片(大量空白):https://gyazo.com/64f5ec3b4d9c2e1f77357d2a040ea153
如果我们继续滚动(如果一直滚动,它会一直添加空白):https://gyazo.com/f9e1be36eabbcafdd8767b05a29d2259
知道发生了什么吗?
在你的 Swiper Initialization 部分,使用 slidesOffsetAfter: 0,更多细节见下面的例子:
<script>
var swiper = new Swiper('.swiper-container', {
slidesPerView: 3,
spaceBetween: 30,
slidesOffsetAfter:0,
freeMode: true,
pagination: {
el: '.swiper-pagination',
clickable: true,
},
});
</script>
我认为你应该尝试像这样添加
loopFillGroupBlank: false,
:
complete: function (data) {
var mySwiper3 = myApp.swiper('.swiper-eventos-home', {
spaceBetween: 15,
loopFillGroupBlank: false,
});
}