MUI-页面刷新

郁慕斯-ing

已于 2022-09-09 14:19:50 修改

阅读量1.6k

点赞数 1

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

于 2022-04-23 03:22:12 首次发布

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

版权

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='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>