mui上拉加载

最新推荐文章于 2024-03-17 23:02:09 发布

123跟你走。~~

最新推荐文章于 2024-03-17 23:02:09 发布

阅读量700

点赞数

本文链接：https://blog.csdn.net/weixin_42834575/article/details/81288414

版权

HTML：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title>上拉加载</title>
    <link href="css/mui.min.css" rel="stylesheet" />
    <link href="css/style.css" rel="stylesheet" />
</head>
<body>
    <header class="mui-bar mui-bar-nav">
	    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
	    <h1 class="mui-title"></h1>
	</header>
    <div class="mui-content mui-scroll-wrapper" id="slider">
    	<div class="mui-scroll booksBox">
			<ul class="mui-table-view  mui-table-view-chevron books"></ul>
    	</div>
		<div id="idx"></div>
	    <div class="waitImg">
   			<img src="img/waiting.gif" class="dochoice" />
        </div>
    </div>
	<script src="js/mui.min.js"></script>
	<script src="js/books.js"></script>
</body>
</html>

JS:

mui.init({
	  pullRefresh : {
	    container:('#slider'),//待刷新区域标识，querySelector能定位的css选择器均可，比如：id、.class等
	    up : {
	      height:50,//可选.默认50.触发上拉加载拖动距离
	      auto:true,//可选,默认false.自动上拉加载一次
	      contentrefresh : "正在加载...",//可选，正在加载状态时，上拉加载控件上显示的标题内容
	      contentnomore:'没有更多数据了',//可选，请求完毕若没有更多数据时显示的提醒内容；
	      callback :function(){
	      	pullfresh(this);
	      } //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；
	    }
	  }
	});

	//展现文库 上拉刷新
	var counter = 1;//刷新次数
	var flag = false;
	function pullfresh(self){
		mui.ajax({
			url:url,
			type:"get",
			data:{
	      		page:counter,
		      	limit:10
	  		},
			beforeSend:function(){
				waitImg.style.display="block";
			},
			success:function(res){
				waitImg.style.display="none";
				//判断是否有返回值 当没有返回值的时候就为空，则代表没有更多数据了
				var data=res.record;
		        flag=(data.length==0?true:false);
		        if(flag ==false){
		         	counter++;
		         	self.endPullupToRefresh(false);
		        }else{
		        	self.endPullupToRefresh(true);
		        }
				if(res.code==0){
					var books=document.getElementsByClassName("books")[0];
					for(var j=0;j<data.length;j++){
						var li=document.createElement("li");
						li.className="mui-table-view-cell";
						li.setAttribute("id",data[j].id)
						var icon=document.createElement("span");
						icon.className="icon";
						li.appendChild(icon);
						var word=document.createElement("span");
						word.innerHTML=data[j].fileName;
						li.appendChild(word);
						books.appendChild(li);
					}
				}
			},
			error:function(){
				waitImg.style.display="none";
				mui.toast("请求失败");
			}
		})
	}