mui ajax下拉刷新分页,mui实现分页上拉加载更多 下拉刷新数据的简单实现 移动端下拉上拉...

mui上拉刷新下拉加载demo--封装

height: 30px;

line-height: 30px;

font-size: 14px;

color: #bbb;

text-indent: 4%;

border-bottom: 1px solid currentColor;

}

var pager = {};//分页

var totalPage;//总页码

pullRefresh(pager);//启用上拉下拉

functionpullRefresh(){

mui("#refreshContainer").pullRefresh({

up:{

contentrefresh :"正在加载...",//可选，正在加载状态时，上拉加载控件上显示的标题内容

contentnomore:'没 有 更 多 数 据 了',//可选，请求完毕若没有更多数据时显示的提醒内容；

callback:function(){//必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；

window.setTimeout(function(){

getData(pager);

},500);

}

},

down : {

height:50,//可选,默认50.触发下拉刷新拖动距离,

auto: true,//可选,默认false.首次加载自动下拉刷新一次

contentdown : "下拉可以刷新",//可选，在下拉可刷新状态时，下拉刷新控件上显示的标题内容

contentover : "释放立即刷新",//可选，在释放可刷新状态时，下拉刷新控件上显示的标题内容

contentrefresh : "正在刷新...",//可选，正在刷新状态时，下拉刷新控件上显示的标题内容

callback :function(){ //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；

window.setTimeout(function(){

pager['size']= 3;//条数

pager['page'] = 1;//页码

//刷新要先清空父节点里面的子节点

var f = document.getElementById("list");var childs =f.childNodes;for(var i = childs.length - 1; i >= 0; i--) {

f.removeChild(childs[i]);

}

getData(pager);

},500);

}

}

})

}//这个方法是负责向接口请求数据的，你可以选择你喜欢的方式，我这里是直接用的mui.ajax

functiongetData(params){

mui.ajax("/article/getArticlePage",{

data:{"header":{"os":"wap","app":"xxxx","ver":1.0},"data":params

},

dataType:'json',

type:'post',

headers:{'Content-Type':'application/json'},

success:function(data){

mui('#refreshContainer').pullRefresh().endPullupToRefresh(true);//下面这坨都是在拼dom 你可以用jquery 或者是你所熟悉的angular,vue双向绑定

var returnData =data.data;var element=document.getElementById("list");varpara;varnode;for(var i = 0; i

para= document.createElement("li");

node=document.createTextNode(returnData[i].article_title)

para.appendChild(node);

element.appendChild(para);

}//这里很重要，这里获取页码 公式：总条数/每页显示条数 (这里的处理是根据接口返回数据来做的处理 最下面有接口返回数据的格式)

totalPage = data.ext%pager.size!=0?parseInt(data.ext/pager.size)+1:data.ext/pager.size;if(totalPage==pager.page){//总页码等于当前页码，停止上拉下拉

mui('#refreshContainer').pullRefresh().endPullupToRefresh(true);

}else{

pager.page++;

mui('#refreshContainer').pullRefresh().refresh(true);

}

},

error:function(xhr,type,errorThrown){//异常处理；

console.log(type);

}

})

}