mui ajax 下拉,mui实现下拉加载更多

html代码

以下是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 = '

' + data[i].title

var html11 = ''

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 = ''

}

//console.log(read_type)

var html2 = '

发送人：' + data[i].username + '

状态：' + read_type + '

时间：' + data[i].create_time + '

消息内容

标题:

' + data[i].title + '

内容:

' + data[i].message + '

发送人:

' + data[i].username + '

发送时间:

' + data[i].create_time + '

';

var html21

if(data[i].showbutton == undefined) {

html21 = '

查看故障信息  

';

} else if(data[i].showbutton == true) {

html21 = '

查看故障信息  

';

} else {

html21 = '';

}

var html22 = '

';

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);

}

})

}