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