dropload上拉加载 下拉刷新
1.引入css、js
<link rel="stylesheet" href=" ${pageContext.request.contextPath}/dist/dropload.css">
<script src="${pageContext.request.contextPath}/dist/dropload.min.js"></script>
2、
$('.list').dropload({ scrollArea : window, domUp : { domClass : 'dropload-up', domRefresh : '<div class="dropload-refresh">↓下拉刷新</div>', domUpdate : '<div class="dropload-update">↑释放更新</div>', domLoad : '<div class="dropload-load"><span class="loading"></span>加载中...</div>' }, domDown : { domClass : 'dropload-down', domRefresh : '<div class="dropload-refresh">↑上拉加载更多</div>', domLoad : '<div class="dropload-load"><span class="loading"></span>加载中...</div>', domNoData : '<div class="dropload-noData">暂无数据 </div>' }, loadUpFn : function(me){ var reqjson = { "pageNum":1, "pageSize":pageSize, }; $.ajax({ type : "GET", dataType : "JSON", cache:false, url : "mall/product", data : reqjson, beforeSend: function(request) { request.setRequestHeader("token", localStorage.getItem("token")); }, success : function(result) { var html=''; $.each(result.data, function(name, value) { html+='<li>'; html+='<a href="mall/product/'+value.id+'">'; html+='<div class="imag"><img src="http://pic.91peini.com/'+value.image+'" alt="'+value.proName+'" ><div class="price">¥'+Validate.isMoney(value.showPrice)+'</div></div>'; html+='<div class="inf">'; html+='<h6>'+value.proName+'</h6>'; html+='<p><span>月销'+value.sellCount+'笔</span></p>'; html+='</div>'; html+='</a>'; html+='</li>'; }); // 为了测试,延迟1秒加载 setTimeout(function(){ $("#productlist").html(html); // 每次数据加载完,必须重置 me.resetload(); // 重置页数,重新获取loadDownFn的数据 pageNum = 1; // 解锁loadDownFn里锁定的情况 me.unlock(); me.noData(false); },1000); $(".banner").width($(window).width()); var wid=$(".banner").width(); $(".banner").height(wid/2.2); var iwid=$("#productlist li div.imag").width(); $("#productlist li div.imag").height(iwid) var swiper = new Swiper('.swiper-container', { pagination: '.swiper-pagination', nextButton: '.swiper-button-next', prevButton: '.swiper-button-prev', paginationClickable: true, spaceBetween: 30, centeredSlides: true, autoplay: 2500, autoplayDisableOnInteraction: false }); }, error: function(xhr, type){ // alert('Ajax error!'); // 即使加载出错,也得重置 me.resetload(); } }) }, loadDownFn : function(me){ // 拼接HTML var result = ''; pageNum++; var reqjson = { "pageNum":pageNum, "pageSize":pageSize, }; $.ajax({ type : "GET", dataType : "JSON", cache:false, url : "mall/product", data : reqjson, beforeSend: function(request) { request.setRequestHeader("token", localStorage.getItem("token")); }, success : function(result) { var html=''; if(result.data.length>0){ $.each(result.data, function(name, value) { html+='<li>'; html+='<a href="mall/product/'+value.id+'">'; html+='<div class="imag"><img src="http://pic.91peini.com/'+value.image+'" alt="'+value.proName+'" ><div class="price">¥'+Validate.isMoney(value.price)+'</div></div>'; html+='<div class="inf">'; html+='<h6>'+value.proName+'</h6>'; html+='<p><span>月销'+value.sellCount+'笔</span></p>'; html+='</div>'; html+='</a>'; html+='</li>'; }); }else{ // 锁定 me.lock(); // 无数据 me.noData(); } // 为了测试,延迟1秒加载 setTimeout(function(){ // 插入数据到页面,放到最后面 $("#productlist").append(html); // 每次数据插入,必须重置 me.resetload(); },1000); $(".banner").width($(window).width()); var wid=$(".banner").width(); $(".banner").height(wid/2.2); var iwid=$("#productlist li div.imag").width(); $("#productlist li div.imag").height(iwid) var swiper = new Swiper('.swiper-container', { pagination: '.swiper-pagination', nextButton: '.swiper-button-next', prevButton: '.swiper-button-prev', paginationClickable: true, spaceBetween: 30, centeredSlides: true, autoplay: 2500, autoplayDisableOnInteraction: false }); }, error: function(xhr, type){ // alert('Ajax error!'); // 即使加载出错,也得重置 me.resetload(); } }) }, threshold : 50 });