mui 上下拉刷新pullRefresh
mui 上下拉刷新pullRefresh，例子
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link href="../css/mui.min.css" rel="stylesheet" />
<script src="../js/mui.min.js"></script>
<style type="text/css">
li {
height: 30px;
line-height: 30px;
font-size: 14px;
color: #bbb;
text-indent: 4%;
border-bottom: 1px solid currentColor;
}
</style>
</head>
<body>
<!--下拉刷新容器-->
<div id="refreshContainer" class="mui-content mui-scroll-wrapper">
<div class="mui-scroll">
<!--数据列表-->
<ul class="mui-table-view mui-table-view-chevron" id="list">
</ul>
</div>
</div>
</body>
<script type="text/javascript" charset="utf-8">
var dataJson = {
"header": {
"ret": "S"
},
"data":[
{
"article_id":"12333333",
"article_img":["images/ad2.jpg","images/ad3.jpg"],
"article_tile":"fdsfsdffsdgsdgdf",
"article_content":"fdsfsdffsdgsdgdf",
"article_summart":"",
"article_ot":"2020-08-05 12:12:12",
"article_reader":12,
"article_display":"1"
},
{
"article_id":"12333333",
"article_img":["images/ad2.jpg","images/ad3.jpg"],
"article_tile":"fdsfsdffsdgsdgdf",
"article_content":"fdsfsdffsdgsdgdf",
"article_summart":"",
"article_ot":"2020-08-05 12:12:12",
"article_reader":12,
"article_display":"1"
},
{
"article_id":"12333333",
"article_img":["images/ad2.jpg","images/ad3.jpg"],
"article_tile":"fdsfsdffsdgsdgdf",
"article_content":"fdsfsdffsdgsdgdf",
"article_summart":"",
"article_ot":"2020-08-05 12:12:12",
"article_reader":12,
"article_display":"1"
},
{
"article_id":"12333333",
"article_img":["images/ad2.jpg","images/ad3.jpg"],
"article_tile":"fdsfsdffsdgsdgdf",
"article_content":"fdsfsdffsdgsdgdf",
"article_summart":"",
"article_ot":"2020-08-05 12:12:12",
"article_reader":12,
"article_display":"1"
}
],
"ext":"890"
}
var pager = {}; //分页
var totalPage; //总页码
pullRefresh(pager); //启用上拉下拉
function pullRefresh() {
mui("#refreshContainer").pullRefresh({
up: {
contentrefresh: "正在加载...", //可选，正在加载状态时，上拉加载控件上显示的标题内容
contentnomore: '没 有 更 多 数 据 了', //可选，请求完毕若没有更多数据时显示的提醒内容；
callback: function() { //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；
window.setTimeout(function() {
getData(pager);
}, 500);
}
},
down: {
height: 50, //可选,默认50.触发下拉刷新拖动距离,
auto: true, //可选,默认false.首次加载自动下拉刷新一次
contentdown: "下拉可以刷新", //可选，在下拉可刷新状态时，下拉刷新控件上显示的标题内容
contentover: "释放立即刷新", //可选，在释放可刷新状态时，下拉刷新控件上显示的标题内容
contentrefresh: "正在刷新...", //可选，正在刷新状态时，下拉刷新控件上显示的标题内容
callback: function() { //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；
window.setTimeout(function() {
pager['size'] = 3; //条数
pager['page'] = 1; //页码
//刷新要先清空父节点里面的子节点
var f = document.getElementById("list");
var childs = f.childNodes;
for (var i = childs.length - 1; i >= 0; i--) {
f.removeChild(childs[i]);
}
getData(pager);
}, 500);
}
}
})
}
//这个方法是负责向接口请求数据的，你可以选择你喜欢的方式，我这里是直接用的mui.ajax
function getData(params) {
mui('#refreshContainer').pullRefresh().endPullupToRefresh(true);
//下面这坨都是在拼dom 你可以用jquery 或者是你所熟悉的angular,vue双向绑定
var returnData = dataJson.data;
var element = document.getElementById("list");
var para;
var node;
for (var i = 0; i < returnData.length; i++) {
para = document.createElement("li");
node = document.createTextNode(returnData[i].article_tile)
para.appendChild(node);
element.appendChild(para);
}
//这里很重要，这里获取页码 公式：总条数/每页显示条数 （这里的处理是根据接口返回数据来做的处理 最下面有接口返回数据的格式）
totalPage = dataJson.ext % pager.size != 0 ? parseInt(dataJson.ext / pager.size) + 1 : dataJson.ext / pager.size;
if (totalPage == pager.page) { //总页码等于当前页码，停止上拉下拉
mui('#refreshContainer').pullRefresh().endPullupToRefresh(true);
} else {
pager.page++;
mui('#refreshContainer').pullRefresh().refresh(true);
}
}
function getData2(params) {
mui.ajax("/article/getArticlePage", {
data: {
"header": {
"os": "wap",
"app": "xxxx",
"ver": 1.0
},
"data": params
},
dataType: 'json',
type: 'post',
headers: {
'Content-Type': 'application/json'
},
success: function(data) {
mui('#refreshContainer').pullRefresh().endPullupToRefresh(true);
//下面这坨都是在拼dom 你可以用jquery 或者是你所熟悉的angular,vue双向绑定
var returnData = data.data;
var element = document.getElementById("list");
var para;
var node;
for (var i = 0; i < returnData.length; i++) {
para = document.createElement("li");
node = document.createTextNode(returnData[i].article_title)
para.appendChild(node);
element.appendChild(para);
}
//这里很重要，这里获取页码 公式：总条数/每页显示条数 （这里的处理是根据接口返回数据来做的处理 最下面有接口返回数据的格式）
totalPage = data.ext % pager.size != 0 ? parseInt(data.ext / pager.size) + 1 : data.ext / pager.size;
if (totalPage == pager.page) { //总页码等于当前页码，停止上拉下拉
mui('#refreshContainer').pullRefresh().endPullupToRefresh(true);
} else {
pager.page++;
mui('#refreshContainer').pullRefresh().refresh(true);
}
},
error: function(xhr, type, errorThrown) {
//异常处理；
console.log(type);
}
})
}
</script>
</html>