1***@qq.com
1***@qq.com
  • 发布:2018-10-08 23:11
  • 更新:2018-10-08 23:11
  • 阅读:2116

下拉刷新列表及与后台交互demo

分类:MUI
mui

之前是一次性加载所有数据,最近研究了下拉刷新分页展示。期间踩的坑 哎 不说了 直接发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 关注 分享

要回复文章请先登录注册