Swiper ajax 左右切换，下拉加载更多

最新推荐文章于 2025-06-12 10:47:39 发布

原创最新推荐文章于 2025-06-12 10:47:39 发布 · 5.3k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#ajax #Swiper #springmvc

手机页面同时被 2 个专栏收录

1 篇文章

订阅专栏

微信开发

1 篇文章

订阅专栏

本文介绍了一个使用Tab与Swiper组件实现的交互案例，通过触摸或点击切换Tab，Swiper中的内容随之变化。同时，该示例还实现了加载更多内容的功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<div class="page">


<div class="tabs">
<a href="javascript:;" hidefocus="true" class="active">tabl1</a>
<a href="javascript:;" hidefocus="true" >tab2</a>
</div>
<div class="swiper-container">
<div class="swiper-wrapper" >

<div class="swiper-slide" id="content1">
<c:forEach items="${dto.list }" var="item" varStatus="st">
<div class="zxbox">
${item.title }
</div>
</c:forEach>
<div class="moreIdeas"></div>
</div>

<div class="swiper-slide">
<div class="main">
test
</div>
</div>

</div>

</div>


</div>

<c:if test="${dto.totalPages > 1 }">
<div class="weui-infinite-scroll" id="infinite-demo-1">
<div class="infinite-preloader"></div>
正在加载...
</div>
</c:if>

$(function () {

var tabsSwiper = new Swiper('.swiper-container',{
autoHeight: true, //高度随内容变化
speed:500,
effect : 'slide',
onSlideChangeStart: function(){
$(".tabs .active").removeClass('active');
$(".tabs a").eq(tabsSwiper.activeIndex).addClass('active');
}
});

$(".tabs a").on('touchstart mousedown',function(e){
e.preventDefault()
$(".tabs .active").removeClass('active');
$(this).addClass('active');
tabsSwiper.slideTo($(this).index(), 1000, false);
});

$(".tabs a").click(function(e){
e.preventDefault();

});

if($("#infinite-demo-1")[0]) {
var loading = false;
$(document.body).infinite().on("infinite", function() {
if(loading) return;
loading = true;
setTimeout(function() {
var page = $('#page').val();
var totalPages = $('#totalPages').val();
if (totalPages > page) {
var object = new Object();
object.page = parseInt(page) + 1;
var jsoninfo = $.toJSON(object);
$.ajax({
type : 'POST',
url : getRootPath() + "/front/more",
data : jsoninfo,
dataType : 'json',
contentType : 'application/json',
success : function(result) {
var items = result.dto.list;
var html = '';
for (var i = 0; i < items.length; i++) {
var item = items[i];
html = html + '<div class="zxbox">'
html = html + item.title
html = html + '</div>'
}
$('.moreIdeas').empty().before(html);
$('#page').val(result.dto.page);
tabsSwiper.appendSlide(html);
if (object.page == totalPages) {
$('#infinite-demo-1').hide();
loading = true;
}
},
error:function(jqXHR, textStatus, errorThrown){
top.location.href=getRootPath() + "/common/error";
}
});
}

loading = false;
}, 500); //模拟延迟
});
}
});
function changeImage() {
var img = document.getElementById("vImg");
img.src = getRootPath() + '/ImageServlet?t=' + Math.random();
}
</script>