mui下拉/上拉刷新

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/nayi_224/article/details/88343045

很久之前写的demo找了出来,不是很完善,单纯的记录一下,以后再用到了再改。

<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript" src="mui.js"></script>
<script type="text/javascript" src="jquery-3.2.1.min.js"></script>
<link rel="stylesheet" href="mui.css" />
	<script type="text/javascript">
	
	jQuery(function($){
		
		muiInit();
	});	
	
	function testF(){
		var str = "<li>" + ++count + "</li>";
		str += "<li>" + ++count + "</li>";
		jQuery("#testUl").append(str);
	}
	
	function muiInit(){
		mui.init({
			pullRefresh : {
				container : '#pullrefresh',
				down : {
					callback : pulldownRefresh
				},
				up : {
					contentrefresh : '正在加载...',
					callback : pullupRefresh
				}
			}
		});

		return;
		if (mui.os.plus) {
			mui.plusReady(function() {
				setTimeout(function() {
					mui('#pullrefresh').pullRefresh().pullupLoading();
				}, 1000);
			});
		} else {
			mui.ready(function() {
				mui('#pullrefresh').pullRefresh().pullupLoading();
			});
		}

	}
		/*
		 * 下拉刷新具体业务实现
		 */
		function pulldownRefresh() {
			//alert(111);
			mui('#pullrefresh').pullRefresh().endPulldownToRefresh();
			return;
		}
		var count = 0;
		/*
		 * 上拉加载具体业务实现
		 */
		function pullupRefresh() {
			//alert(222);
			testF();
			mui('#pullrefresh').pullRefresh().endPullupToRefresh();
			return;
		}

	</script>
</head>
<body>
	<!--下拉刷新容器-->
	<div id="pullrefresh" class="mui-content mui-scroll-wrapper">
		<div class="mui-scroll">
			<!--数据列表-->
			<ul id="testUl" class="mui-table-view">
			</ul>
			<div>gdfgdlhkgmhfhmk</div>
		</div>
	</div>


</body>

猜你喜欢

转载自blog.csdn.net/nayi_224/article/details/88343045