html代碼
<link href="../css/mui.min.css" rel="stylesheet" />
<div class="mui-content ">
<div id="refreshContainer" class="mui-scroll-wrapper">
<div class="mui-scroll">
<!--數(shù)據(jù)列表-->
<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 = {}; //分頁(yè)
pager.page = 1;
var totalPage; //總頁(yè)碼
var total;//總條數(shù)
pullRefresh(pager); //啟用上拉下拉
console.log(pager.page)
function pullRefresh() {
mui("#refreshContainer").pullRefresh({
up: {
height: 50, //可選,默認(rèn)50.觸發(fā)下拉刷新拖動(dòng)距離,
auto: true, //可選,默認(rèn)false.首次加載自動(dòng)下拉刷新一次
contentdown: "下拉可以加載更多", //可選址否，在下拉可刷新?tīng)顟B(tài)時(shí)紫皇，下拉刷新控件上顯示的標(biāo)題內(nèi)容
contentover: "釋放立即加載", //可選，在釋放可刷新?tīng)顟B(tài)時(shí)族阅，下拉刷新控件上顯示的標(biāo)題內(nèi)容
contentrefresh: "正在加載...", //可選，正在加載狀態(tài)時(shí)愧膀，上拉加載控件上顯示的標(biāo)題內(nèi)容
contentnomore: '沒(méi) 有 更 多 數(shù) 據(jù) 了', //可選呛凶，請(qǐng)求完畢若沒(méi)有更多數(shù)據(jù)時(shí)顯示的提醒內(nèi)容；
callback: function() { //必選灭抑，刷新函數(shù)十艾，根據(jù)具體業(yè)務(wù)來(lái)編寫(xiě)，比如通過(guò)ajax從服務(wù)器獲取新數(shù)據(jù)腾节；
window.setTimeout(function() {
pager['size'] = 10; //條數(shù)
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', //服務(wù)器返回json格式數(shù)據(jù)
type: 'post', //HTTP請(qǐng)求類型
timeout: 10000, //超時(shí)時(shí)間設(shè)置為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>發(fā)送人：' + data[i].username + '</h5><p class="mui-h5">狀態(tài)：<span class="color_red" id="readsign' + data[i].id + '">' + read_type + '</span></p><p class="mui-h5">時(shí)間：' + 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 ;">消息內(nèi)容</span><label></label></div><div class="mui-input-row"><span class="mui-left1">標(biāo)題:</span><p class="mui-left2">' + data[i].title + '</p></div><div class="mui-input-row"><span class="mui-left1">內(nèi)容:</span><p class="mui-left2">' + data[i].message + '</p></div><div class="mui-input-row"><span class="mui-left1">發(fā)送人:</span><p class="mui-left2">' + data[i].username + '</p></div><div class="mui-input-row"><span class="mui-left1">發(fā)送時(shí)間:</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;
}
//這里很重要，這里獲取頁(yè)碼 公式：總條數(shù)/每頁(yè)顯示條數(shù)
totalPage = total % pager.size != 0 ?parseInt(total / pager.size) + 1 :total / pager.size;
if(totalPage == pager.page) { //總頁(yè)碼等于當(dāng)前頁(yè)碼案腺，停止上拉下拉 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);
}
})
}
