MUI-上拉刷新和下拉刷新

慕斯-ing

已于 2022-09-09 14:21:35 修改

阅读量2.6k

点赞数 2

分类专栏： MUI 文章标签：学习经验分享前端

于 2022-04-25 04:05:04 首次发布

本文链接：https://blog.csdn.net/blbyu/article/details/124395907

版权

MUI 专栏收录该内容

26 篇文章 20 订阅

订阅专栏

上（下）拉刷新代码一

<script type="text/javascript">
	mui.init({
		pullRefresh : {
			// 定义容器
			container:'#refreshContainer',
			// 往下拉（callback：回调函数）
			down : {
				// style:'circle',//必选，下拉刷新样式，目前支持原生5+ ‘circle’ 样式
				// color:'#2BD009', //可选，默认“#2BD009” 下拉刷新控件颜色
				// height:'150px',//可选,默认50px.下拉刷新控件的高度,
				// range:'100px', //可选 默认100px,控件可下拉拖拽的范围
				// offset:'0px', //可选 默认0px,下拉刷新控件的起始位置
				// auto: true,//可选,默认false.首次加载自动上拉刷新一次
				callback :pulldownRefresh
			},
			// 往上拉（callback：回调函数）
			up : {
				callback :pullupRefresh 
			}
		}
	}); 
	// 定义下拉回调函数
	function pulldownRefresh(){
		alert("进行下拉数据刷新");
		// 下拉刷新结束
		mui('#refreshContainer').pullRefresh().endPulldownToRefresh();
	}
	// 定义上拉回调函数
	function pullupRefresh(){
		alert("进行上拉数据加载");
		// 下拉刷新结束
		mui('#refreshContainer').pullRefresh().endPullupToRefresh();
	}
</script>

上（下）拉刷新代码二（刷新的同时新增一段内容）

<script type="text/javascript">
	mui.init({
		pullRefresh : {
			container:'#refreshContainer',
			down : {
			  callback :pulldownfresh
			},
			up : {
			  callback :pullupfresh 
			}
		}
	})
	function pulldownfresh(){
		// 延迟执行
		setTimeout(function(){
			var friendlist = document.body.querySelector(".friendlist");
			var liNode = document.createElement("li");
			liNode.className = "mui-table-view-cell mui-media";
			liNode.innerHTML = "<a href='javascript:;'>"
				+ "<img class='mui-media-object mui-pull-left' src='image/friends_icon8.png'>"
				+ "<div class='mui-media-body'>" 
				+ "银行信用卡"  
				+ "<p class='mui-ellipsis'>[消息提醒]您有一波半价美食待领取</p>"
				+ "</div></a>";
			// 将新创建的节点添加到当前界面的第一个节点中
			friendlist.insertBefore(liNode,friendlist.firstChild);
			// 终止刷新，不然会一直刷新
			mui('#refreshContainer').pullRefresh().endPulldownToRefresh();				
		},1500);
	}
	function pullupfresh(){
		setTimeout(function(){
			var friendlist = document.body.querySelector(".friendlist");
			var liNode = document.createElement("li");
			liNode.className = "mui-table-view-cell mui-media";
			liNode.innerHTML = "<a href='javascript:;'>"
				+ "<img class='mui-media-object mui-pull-left' src='image/friends_icon8.png'>"
				+ "<div class='mui-media-body'>" 
				+ "银行信用卡"  
				+ "<p class='mui-ellipsis'>[消息提醒]您有一波半价美食待领取</p>"
				+ "</div></a>";
			// 将新创建的节点添加到当前界面的最后一个节点中
			friendlist.appendChild(liNode);
			// true表示没有更多的数据
			mui('#refreshContainer').pullRefresh().endPullupToRefresh(true);
		},1500);
	}
</script>