js下拉刷新，上拉加载更多的实现

ゝ一世哀愁。 2022-02-24 05:58 326阅读 0赞

使用第三方控件**[mescroll][]**

参考文档：[http://www.mescroll.com/api.html][http_www.mescroll.com_api.html]

<!DOCTYPE html>
    <html>
    
    	<head>
    		<meta charset="utf-8">
    		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
    		<meta name="apple-mobile-web-app-capable" content="yes">
    
    		<link rel="stylesheet" href="../../dist/mescroll.min.css">
    		<style type="text/css">
    			* {
    				margin: 0;
    				padding: 0;
    				-webkit-touch-callout:none;
    				-webkit-user-select:none;
    				-webkit-tap-highlight-color:transparent;
    			}
    			body{background-color: white}
    			ul{list-style-type: none}
    			a {text-decoration: none;color: #18B4FE;}
    			
    			/*模拟的标题*/
    			.header{
    				z-index: 9990;
    				position: fixed;
    				top: 0;
    				left: 0;
    				width: 100%;
    				height: 44px;
    				line-height: 44px;
    				text-align: center;
    				border-bottom: 1px solid #eee;
    				background-color: white;
    			}
    			.header .btn-left{
    				position: absolute;
    				top: 0;
    				left: 0;
    				padding:12px;
    				line-height: 22px;
    			}
    			.header .btn-right{
    				position: absolute;
    				top: 0;
    				right: 0;
    				padding: 0 12px;
    			}
    			/*说明*/
    			.notice{
    				padding: 20px;
    				border-bottom: 1px solid #eee;
    				font-size: 14px;
    				line-height: 24px;
    				text-align: center;
    				color:#555;
    			}
    			.btn-change{
    				display: inline-block;
    				margin-top: 14px;
    				font-size: 14px;
    				padding: 3px 15px;
    				text-align: center;
    				border: 1px solid #FF6990;
    				border-radius: 20px;
    				color: #FF6990;
    			}
    			.btn-change:active{
    				opacity: .5;
    			}
    			/*列表*/
    			.mescroll{
    				position: fixed;
    				top: 44px;
    				bottom: 0;
    				height: auto;
    			}
    			/*展示上拉加载的数据列表*/
    			.data-list li{
    				position: relative;
    				padding: 10px 8px 10px 120px;
    				border-bottom: 1px solid #eee;
    			}
    			.data-list .pd-img{
    				position: absolute;
    				left: 18px;
    				top: 18px;
    				width: 80px;
    				height: 80px;
    			}
    			.data-list .pd-name{
    				font-size: 16px;
    				line-height: 20px;
    				height: 40px;
    				overflow: hidden;
    			}
    			.data-list .pd-price{
    				margin-top: 8px;
    				color: red;
    			}
    			.data-list .pd-sold{
    				font-size: 12px;
    				margin-top: 8px;
    				color: gray;
    			}
    		</style>
    	</head>
    
    	<body>
    		
    		<p class="header"><a class="btn-left" href="../index.html">main</a> 商品列表 <a class="btn-right" href="list-news.html">list-news</a></p>
    		
    		<div id="mescroll" class="mescroll">
    			<div class="notice">
    				因为商品的名称价格销量会变动,也可能会下架删除<br />所以本Demo的下拉刷新会重置列表数据<br />
    				<p class="btn-change">模拟后台修改商品信息</p>
    			</div>
    			
    			<ul id="dataList" class="data-list">
    				
    			</ul>
    		</div>
    	</body>
    	
    	<script src="../../dist/mescroll.min.js" type="text/javascript" charset="utf-8"></script>
    	
    	<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js" type="text/javascript" charset="utf-8"></script>
    	<script type="text/javascript" charset="utf-8">
    		$(function(){
    			//创建MeScroll对象,内部已默认开启下拉刷新,自动执行up.callback,重置列表数据;
    			var mescroll = new MeScroll("mescroll", {
    				up: {
    					callback: getListData, //上拉回调,此处可简写; 相当于 callback: function (page) { getListData(page); }
    					isBounce: false, //此处禁止ios回弹,解析(务必认真阅读,特别是最后一点): http://www.mescroll.com/qa.html#q10
    					clearEmptyId: "dataList", //1.下拉刷新时会自动先清空此列表,再加入数据; 2.无任何数据时会在此列表自动提示空
    					toTop:{ //配置回到顶部按钮
    						src : "../res/img/mescroll-totop.png", //默认滚动到1000px显示,可配置offset修改
    						//offset : 1000
    					},
    					lazyLoad: {
    			        	use: true // 是否开启懒加载,默认false
    			        }
    				}
    			});
    			
    			/*联网加载列表数据  page = {num:1, size:10}; num:当前页 从1开始, size:每页数据条数 */
    			function getListData(page){
    				//联网加载数据
    				getListDataFromNet(page.num, page.size, function(curPageData){
    					//联网成功的回调,隐藏下拉刷新和上拉加载的状态;
    					//mescroll会根据传的参数,自动判断列表如果无任何数据,则提示空;列表无下一页数据,则提示无更多数据;
    					console.log("page.num="+page.num+", page.size="+page.size+", curPageData.length="+curPageData.length);
    					
    					//方法一(推荐): 后台接口有返回列表的总页数 totalPage
    					//mescroll.endByPage(curPageData.length, totalPage); //必传参数(当前页的数据个数, 总页数)
    					
    					//方法二(推荐): 后台接口有返回列表的总数据量 totalSize
    					//mescroll.endBySize(curPageData.length, totalSize); //必传参数(当前页的数据个数, 总数据量)
    					
    					//方法三(推荐): 您有其他方式知道是否有下一页 hasNext
    					//mescroll.endSuccess(curPageData.length, hasNext); //必传参数(当前页的数据个数, 是否有下一页true/false)
    					
    					//方法四 (不推荐),会存在一个小问题:比如列表共有20条数据,每页加载10条,共2页.如果只根据当前页的数据个数判断,则需翻到第三页才会知道无更多数据,如果传了hasNext,则翻到第二页即可显示无更多数据.
    					mescroll.endSuccess(curPageData.length);
    					
    					//提示:curPageData.length必传的原因:
    					// 1.判断是否有下一页的首要依据: 当传的值小于page.size时,则一定会认为无更多数据.
    					// 2.比传入的totalPage, totalSize, hasNext具有更高的判断优先级
    					// 3.使配置的noMoreSize生效
    					
    					//设置列表数据,因为配置了emptyClearId,第一页会清空dataList的数据,所以setListData应该写在最后;
    					setListData(curPageData);
    				}, function(){
    					//联网失败的回调,隐藏下拉刷新和上拉加载的状态;
    	                mescroll.endErr();
    				});
    			}
    			
    			/*设置列表数据*/
    			function setListData(curPageData){
    				var listDom=document.getElementById("dataList");
    				for (var i = 0; i < curPageData.length; i++) {
    					var pd=curPageData[i];
    					
    					var str='<img class="pd-img" src="../res/img/loading-sq.png" imgurl="'+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);
    				}
    			}
    			
    			var dataTag=1;
    			$(".btn-change").click(function(){
    				if (dataTag==1) {
    					dataTag=2;
    					$(this).html("已模拟后台修改信息 <b>2</b> , 请下拉刷新");
    				} else{
    					dataTag=1;
    					$(this).html("已模拟后台修改信息 <b>1</b> , 请下拉刷新");
    				}
    			});
    			
    			/*联网加载列表数据
    			 在您的实际项目中,请参考官方写法: http://www.mescroll.com/api.html#tagUpCallback
    			 请忽略getListDataFromNet的逻辑,这里仅仅是在本地模拟分页数据,本地演示用
    			 实际项目以您服务器接口返回的数据为准,无需本地处理分页.
    			 * */
    			function getListDataFromNet(pageNum,pageSize,successCallback,errorCallback) {
    				//延时一秒,模拟联网
                    setTimeout(function () {
                    	$.ajax({
    		                type: 'GET',
    		                url: '../res/pdlist'+dataTag+'.json',
    //		                url: '../res/pdlist1.json?num='+pageNum+"&size="+pageSize,
    		                dataType: 'json',
    		                success: function(data){
    		                	//模拟分页数据
    		                	var listData=[];
    							for (var i = (pageNum-1)*pageSize; i < pageNum*pageSize; i++) {
    			            		if(i==data.length) break;
    			            		listData.push(data[i]);
    			            	}
    		                	successCallback(listData);
    		                },
    		                error: errorCallback
    		            });
                    },1000)
    			}
    			
    		});
    	</script>
    
    </html>

完！！！

[mescroll]: http://www.mescroll.com/index.html
[http_www.mescroll.com_api.html]: http://www.mescroll.com/api.html