使用组件来完成MUI的下拉刷新

最新推荐文章于 2020-04-25 15:25:45 发布

coreyC

最新推荐文章于 2020-04-25 15:25:45 发布

阅读量759

点赞数

文章标签： MUI 下拉刷新上拉加载

<!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">
	<!--<li>
	<img class="pd-img" src="../res/img/pd1.jpg"/>
	<p class="pd-name">商品标题商品标题商品标题商品标题商品标题商品</p>
	<p class="pd-price">200.00 元</p>
	<p class="pd-sold">已售50件</p>
	</li>-->
	</ul>
	</div>
	</body>

	<script src="../../dist/mescroll.min.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 type="text/javascript" charset="utf-8">
	$(function(){
	//创建MeScroll对象,内部已默认开启下拉刷新,自动执行up.callback,重置列表数据;
	var mescroll = new MeScroll("mescroll", {
	up: {
	clearEmptyId: "dataList", //1.下拉刷新时会自动先清空此列表,再加入数据; 2.无任何数据时会在此列表自动提示空
	callback: getListData, //上拉回调,此处可简写; 相当于 callback: function (page) { getListData(page); }
	toTop:{ //配置回到顶部按钮
	src : "../res/img/mescroll-totop.png", //默认滚动到1000px显示,可配置offset修改
	//offset : 1000
	}
	}
	});

	/联网加载列表数据 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);

	//设置列表数据,因为配置了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="'+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> , 请下拉刷新");
	}
	});

	/联网加载列表数据/
	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 < pageNumpageSize; i++) {
	if(i==data.length) break;
	listData.push(data[i]);
	}
	successCallback(listData);
	},
	error: errorCallback
	});
	},1000)
	}

	//禁止PC浏览器拖拽图片,避免与下拉刷新冲突;如果仅在移动端使用,可删除此代码
	document.ondragstart=function() {return false;}
	});
	</script>

	</html>

coreyC

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
使用组件来完成MUI的下拉刷新

html> head> meta charset="utf-8"> meta name="viewport"content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
复制链接

扫一扫