html代码
<link href="../css/mui.min.css" rel="stylesheet" />
<div class="mui-content ">
<div id="refreshContainer" class="mui-scroll-wrapper">
<div class="mui-scroll">
<!--数据列表-->
<ul class="mui-table-view mui-table-view-chevron" id="message">
</ul>
</div>
</div
</div>
<script type="text/javascript" src="../js/jquery.min.js" ></script>
<script type="text/javascript" src="../js/mui.min.js"></script>
以下是js代码
var pager = {}; //分页
pager.page = 1;
var totalPage; //总页码
var total;//总条数
pullRefresh(pager); //启用上拉下拉
console.log(pager.page)
function pullRefresh() {
mui("#refreshContainer").pullRefresh({
up: {
height: 50, //可选,默认50.触发下拉刷新拖动距离,
auto: true, //可选,默认false.首次加载自动下拉刷新一次
contentdown: "下拉可以加载更多", //可选，在下拉可刷新状态时，下拉刷新控件上显示的标题内容
contentover: "释放立即加载", //可选，在释放可刷新状态时，下拉刷新控件上显示的标题内容
contentrefresh: "正在加载...", //可选，正在加载状态时，上拉加载控件上显示的标题内容
contentnomore: '没 有 更 多 数 据 了', //可选，请求完毕若没有更多数据时显示的提醒内容；
callback: function() { //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；
window.setTimeout(function() {
pager['size'] = 10; //条数
console.log(pager.page)
getData(pager);
}, 500);
}
},
})
}
function getData(params) {
var start = params.page;
var end = params.size;
console.log(start)
console.log(end)
mui.ajax("/receiver_message", {
data: {
start: start,
end: end
},
dataType: 'json', //服务器返回json格式数据
type: 'post', //HTTP请求类型
timeout: 10000, //超时时间设置为10秒；
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
},
success: function(data) {
mui('#refreshContainer').pullRefresh().endPullupToRefresh(true);
console.log(data.result)
if(data.result == '0000') {
//下面这坨都是在拼dom 你可以用jquery 或者是你所熟悉的angular,vue双向绑定
var data = data.messages;
var message_id = document.getElementById('message');
for(i = 0; i < data.length; i++) {
var readsign = "readsign" + data[i].id;
//console.log(readsign)
var sign;
if(data[i].read == true) {
sign = '已读';
} else if(data[i].read == false) {
sign = '未读';
}
localStorage.setItem('"' + readsign + '"', sign);
var readsign_storage = localStorage.getItem('"' + readsign + '"');
//console.log(readsign_storage)
var html1 = '<li class="mui-table-view-cell mui-collapse " ><a class="mui-navigate-right read" id="read' + data[i].id + '" href="#"><div class="mui-table-cell " style="width: 100%;" ><h4 class="mui-ellipsis-2"><span class="mui-icon mui-icon-chat" style="font-size: 20px;"></span>' + data[i].title
var html11 = '<span id="star" class="mui-icon mui-icon-star" style="color:#f00"></span>'
var read_type
//console.log(readsign)
var readsign_storage = localStorage.getItem('"' + readsign + '"');
//console.log(readsign_storage)
if(readsign_storage == "已读") {
read_type = '已读';
var html12 = ''
} else if(readsign_storage == "未读") {
read_type = '未读';
var html12 = '<span class="star1" id="star1' + data[i].id + '"></span>'
}
//console.log(read_type)
var html2 = '</h4><h5>发送人：' + data[i].username + '</h5><p class="mui-h5">状态：<span class="color_red" id="readsign' + data[i].id + '">' + read_type + '</span></p><p class="mui-h5">时间：' + data[i].create_time + '</p></div><div class="mui-table-cell mui-col-xs-2 mui-text-left"></div></a><div class="mui-collapse-content"><div class="mui-input-row"><span class="mui-left1" style="font-size:18px ;">消息内容</span><label></label></div><div class="mui-input-row"><span class="mui-left1">标题:</span><p class="mui-left2">' + data[i].title + '</p></div><div class="mui-input-row"><span class="mui-left1">内容:</span><p class="mui-left2">' + data[i].message + '</p></div><div class="mui-input-row"><span class="mui-left1">发送人:</span><p class="mui-left2">' + data[i].username + '</p></div><div class="mui-input-row"><span class="mui-left1">发送时间:</span><p class="mui-left2">' + data[i].create_time + '</p></div>';
var html21
if(data[i].showbutton == undefined) {
html21 = '<div class="mui-button-row"><button class="mui-btn mui-btn-primary breakdetail" type="button" id="' + data[i].related_id + '">查看故障信息</button> </div>';
} else if(data[i].showbutton == true) {
html21 = '<div class="mui-button-row"><button class="mui-btn mui-btn-primary breakdetail" type="button" id="' + data[i].related_id + '">查看故障信息</button> </div>';
} else {
html21 = '';
}
var html22 = '</div></li>';
if(data[i].star == true && data[i].read == false) {
var html3 = html1 + html11 + html12 + html2 + html21 + html22
} else if(data[i].read == true || data[i].star == false) {
var html3 = html1 + html11 + html12 + html2 + html21 + html22
} else {
var html3 = html1 + html11 + html12 + html2 + html21 + html22
}
message_id.innerHTML += html3;
}
//这里很重要，这里获取页码 公式：总条数/每页显示条数
totalPage = total % pager.size != 0 ?parseInt(total / pager.size) + 1 :total / pager.size;
if(totalPage == pager.page) { //总页码等于当前页码，停止上拉下拉 mui('#refreshContainer').pullRefresh().endPullupToRefresh(true);
} else {
pager.page = pager.page+1;
console.log('pager.page' + pager.page)
mui('#refreshContainer').pullRefresh().refresh(true);
}
} else if(data.result == '0001') {
}
},
error: function(xhr, type, errorThrown) {
//异常处理；
console.log(type);
}
})
}
