Swiper ajax 左右切换，下拉加载更多
<div class="page"> <!-- tab代码 开始 --> <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" > <!-- 内容1 --> <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> <!-- 内容2 --> <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>
<input type="hidden" value="${dto.page }" id="page"> <input type="hidden" value="${dto.totalPages }" id="totalPages"> <script src="${ly }/js/jquery-2.1.4.js"></script> <script src="${ly }/js/swiper-3.3.1.jquery.min.js"></script> <script src="${ly }/js/jquery-weui.js"></script> <script src="${ly }/js/jquery.json-2.2.min.js"></script> <script src="${ly }/js/utils.js"></script>
<script>
$(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>