微信公众号上拉加载下拉刷新

最近再再做一个公众号的项目有需要用到上拉加载，下拉刷新的技术。在网上找了很久，终于找到一个很好用 js 插件，今天我就把这个插件分享给大家，该包可用于App和微信公众号 ，

资源下载地址：https://download.csdn.net/download/qq_38062785/10910494

这个插件的用法很简单只是需要对 Ajax 技术有一定的了解：

先加载资源包

    <script src="../../mescroll.js" type="text/javascript" charset="utf-8"></script>
	<!--mescroll本身不依赖jq,这里为了模拟发送ajax请求,获取模拟数据-->
	<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js" type="text/javascript" charset="utf-8"></script>
	<!--模拟数据-->
	<script src="../res/pdlist1.js" type="text/javascript" charset="utf-8"></script>

$(function(){
			var curNavIndex=0;//首页0; 奶粉1; 面膜2; 图书3;
			var mescrollArr=new Array(4);//4个菜单所对应的4个mescroll对象
			//初始化首页
			mescrollArr[0]=initMescroll("mescroll0", "dataList0");
			
			/*初始化菜单*/
			$(".nav p").click(function(){
				var i=Number($(this).attr("i"));
				if(curNavIndex!=i) {
					//更改列表条件
					$(".nav .active").removeClass("active");
					$(this).addClass("active");
					//隐藏当前列表
					$("#mescroll"+curNavIndex).hide();
					//显示对应的列表
					curNavIndex=i;
					$("#mescroll"+curNavIndex).show();
					//取出菜单所对应的mescroll对象,如果未初始化则初始化
					if(mescrollArr[i]==null) mescrollArr[i]=initMescroll("mescroll"+i, "dataList"+i);
				}
			})
			
			/*创建MeScroll对象*/
			function initMescroll(mescrollId,clearEmptyId){
				//创建MeScroll对象,内部已默认开启下拉刷新,自动执行up.callback,刷新列表数据;
				var mescroll = new MeScroll(mescrollId, {
					//上拉加载的配置项
					up: {
						callback: getListData, //上拉回调,此处可简写; 相当于 callback: function (page) { getListData(page); }
						noMoreSize: 4, //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
						empty: {
							icon: "../res/img/mescroll-empty.png", //图标,默认null
							tip: "暂无相关数据~", //提示
							btntext: "去逛逛 >", //按钮,默认""
							btnClick: function(){//点击按钮的回调,默认null
								alert("点击了按钮,具体逻辑自行实现");
							} 
						},
						clearEmptyId: clearEmptyId //相当于同时设置了clearId和empty.warpId; 简化写法;默认null
					}
				});
				return mescroll;
			}
			
			/*联网加载列表数据  page = {num:1, size:10}; num:当前页 从1开始, size:每页数据条数 */
			function getListData(page){
				//联网加载数据
				console.log("curNavIndex="+curNavIndex+", page.num="+page.num);
				getListDataFromNet(curNavIndex, page.num, page.size, function(data){
					//联网成功的回调,隐藏下拉刷新和上拉加载的状态;
					console.log("data.length="+data.length);
					mescrollArr[curNavIndex].endSuccess(data.length);//传参:数据的总数; mescroll会自动判断列表如果无任何数据,则提示空;列表无下一页数据,则提示无更多数据;
					//设置列表数据
					setListData(data);
				}, function(){
					//联网失败的回调,隐藏下拉刷新和上拉加载的状态;
	                mescrollArr[curNavIndex].endErr();
				});
			}
			
			/*设置列表数据*/
			function setListData(data){
				var listDom=document.getElementById("dataList"+curNavIndex);
				for (var i = 0; i < data.length; i++) {
					var pd=data[i];
					
					var str='<img class="pd-img" src="'+pd.pdImg+'"/>';
					str+='<p class="pd-name">'+pd.pdName+'</p>';
					str+='<p class="pd-price">'+pd.pdPrice+' 元</p>';
					str+='<p class="pd-sold">已售'+pd.pdSold+'件</p>';
					
					var liDom=document.createElement("li");
					liDom.innerHTML=str;
					listDom.appendChild(liDom);
				}
			}
			
			/*联网加载列表数据*/
			function getListDataFromNet(curNavIndex,pageNum,pageSize,successCallback,errorCallback) {
				//延时一秒,模拟联网
                setTimeout(function () {
//              	$.ajax({
//		                type: 'GET',
//		                url: 'xxx',
//		                url: 'xxx?curNavIndex='+curNavIndex+'&num='+pageNum+'&size='+pageSize,
//		                dataType: 'json',
//		                success: function(data){
		                	var data=pdlist1; // 模拟数据: ../res/pdlist1.js
		                	var listData=[];
		                	
		                	//curNavIndex 首页0; 奶粉1; 面膜2; 图书3;
		                	if(curNavIndex==0){
		                		//首页 (模拟分页数据)
								for (var i = (pageNum-1)*pageSize; i < pageNum*pageSize; i++) {
				            		if(i==data.length) break;
				            		listData.push(data[i]);
				            	}
								
		                	}else if(curNavIndex==1){
		                		//奶粉
		                		for (var i = 0; i < data.length; i++) {
		                			if (data[i].pdName.indexOf("奶粉")!=-1) {
		                				listData.push(data[i]);
		                			}
		                		}
		                		
		                	}else if(curNavIndex==2){
		                		//面膜
		                		for (var i = 0; i < data.length; i++) {
		                			if (data[i].pdName.indexOf("面膜")!=-1) {
		                				listData.push(data[i]);
		                			}
		                		}
		                		
		                	}else if(curNavIndex==3){
		                		//图书
		                		for (var i = 0; i < data.length; i++) {
		                			if (data[i].pdName.indexOf("图书")!=-1) {
		                				listData.push(data[i]);
		                			}
		                		}
		                	}
		                	
		                	//回调
		                	successCallback(listData);
//		                },
//		                error: errorCallback
//		            });
                },400)
			}
			
			//禁止PC浏览器拖拽图片,避免与下拉刷新冲突;如果仅在移动端使用,可删除此代码
			document.ondragstart=function() {return false;}
		});