html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title>胜诉退费</title>
<link href="css/mui.min.css" rel="stylesheet" />
<link rel="stylesheet" href="css/sstf.css">
</head>
<body>
<!--下拉刷新容器-->
<!--下拉刷新容器-->
<div id="refreshContainer" class="mui-content mui-scroll-wrapper">
<div class="mui-scroll">
<!--数据列表-->
<ul id="testUl" class="">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
</ul>
</div>
</div>
<script type="text/javascript" src="js/jquery.min.js" ></script>
<script src="js/mui.min.js"></script>
<script type="text/javascript" charset="utf-8">
var countDown = 0; //下拉次数
var countUp = 0; //上拉次数
mui.init({
pullRefresh: {
container: "#refreshContainer", //待刷新区域标识,querySelector能定位的css选择器均可,比如:id、.class等
down: { //下拉刷新
height: 50, //可选,默认50.触发下拉刷新拖动距离,
auto: false, //可选,默认false.首次加载自动下拉刷新一次
contentdown: "下拉可以刷新", //可选,在下拉可刷新状态时,下拉刷新控件上显示的标题内容
contentover: "释放立即刷新", //可选,在释放可刷新状态时,下拉刷新控件上显示的标题内容
contentrefresh: "正在刷新...", //可选,正在刷新状态时,下拉刷新控件上显示的标题内容
callback: async function() { //必选,刷新函数,根据具体业务来编写,比如通过ajax从服务器获取新数据;
if(countDown >= 3) {
mui.toast("没有更多数据了");
//没有数据
mui('#refreshContainer').pullRefresh().endPulldownToRefresh(true);
return;
}
//模拟向服务器获取数据的等待时间
await sleep(1000);
///*每次加载动态的添加一个li*/
$("#testUl li:first").before($("<li>" + new Date() + "</li>"));
alert("更新了一条数据");
没有更多内容了,endPulldown 传入true, 不再执行下拉刷新
mui('#refreshContainer').pullRefresh().endPulldownToRefresh();
countDown++;
}
},
up: { //上拉加载
height: 50, //可选.默认50.触发上拉加载拖动距离
auto: false, //可选,默认false.自动上拉加载一次
contentrefresh: "正在加载...", //可选,正在加载状态时,上拉加载控件上显示的标题内容
contentnomore: '没有更多数据了', //可选,请求完毕若没有更多数据时显示的提醒内容;
callback: async function() { //必选,刷新函数,根据具体业务来编写,比如通过ajax从服务器获取新数据;
if(countUp >= 3) {
this.endPullupToRefresh(true); //没有数据
return;
}
await sleep(1000);
/*每次加载动态的添加一个li*/
$("#testUl").append($("<li>" + new Date() + "</li>"));
this.endPullupToRefresh(false)
countUp++;
}
}
}
});
//模拟线程等待,ms:单位毫秒
function sleep(ms) {
return new Promise(resolve => setTimeout(resolve, ms));
}
</script>
</body>
</html>
更多推荐
mui下拉刷新以及分页加载
发布评论