MUI-页面刷新

Posted 2022-04-25 时光-ing

纯页面刷新

<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='img/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);
	
</script>