mui下拉/上拉刷新

最新推荐文章于 2023-07-15 22:27:10 发布

nayi_224

最新推荐文章于 2023-07-15 22:27:10 发布

阅读量293

点赞数

分类专栏： demo 文章标签： demo

本文链接：https://blog.csdn.net/nayi_224/article/details/88343045

版权

demo 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

很久之前写的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>