之前是一次性加载所有数据,最近研究了下拉刷新分页展示。期间踩的坑 哎 不说了 直接发demo
请求后台接口改成自己的即可,
<div class="mui-content" style="margin-top:2.5rem;">
<div>
<div id="item1" class="mui-control-content mui-active">
<div id="scroll" class="mui-scroll-wrapper">
<div id="pullrefresh" class="mui-scroll">
<ul class="mui-table-view">
<!--数据展示区-->
</ul>
</div>
</div>
</div>
</div>
</div>
mui.init({
swipeBack:true, //启用右滑关闭功能
pullRefresh: {
container: '#pullrefresh',
down:{
auto:true,
contentrefresh: '',
style:'circle',
callback: pulldownRefresh
}
}
});
var count = 0;
var isOver = false;//是否加载完
function addData() {
var userid = localStorage.getItem('Userid');
var pageSize = 10;//条数
var Limit = count*pageSize;
mui.ajax(serverhost+'/getmyfeedback/myfeedbacklist',{
data:{pageStart:Limit,userid},
dataType:'json',
type:'GET',
timeout:5000,
success:function(res){
if(res.return_code==0){
var data = res.data;
var table = document.body.querySelector('.mui-table-view');
for (var i=0;i< data.length;i++) {
if(data[i].text ==''){
data[i].text = '问题确认中';
}
var li = document.createElement('li');
li.className = 'mui-table-view-cell';
li.innerHTML = '<h5>'+data[i].title+'</h5>'+
'<h5>'+data[i].ftext+'</h5>'+
'<p style="color:red;font-weight:bold;">'+data[i].text+'</p>';
//下拉刷新,纪录插入;
table.insertBefore(li, table.firstChild);
}
if(data.length < pageSize){
isOver = true;
}else{
count++;
}
}
},error: function(xhr, type, errorThrown) {
mui.toast('网络异常,请稍后再试');
}
})
}
/**
- 下拉刷新具体业务实现
*/
function pulldownRefresh() {
setTimeout(function() {
if(isOver == true){
mui.toast("我是有底线滴~");
mui('#pullrefresh').pullRefresh().endPulldown((isOver));
return false;
}else{
addData();
mui('#pullrefresh').pullRefresh().endPulldown((isOver));
}
},800);
}
0 个评论
要回复文章请先登录或注册