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