mui用ajax上拉加载更多,mui上拉加载更多下拉刷新数据的封装过程

辗转用mui做了两个项目，空下来把mui上拉加载更多，下拉刷新数据做了一个简单的封装，希望可以帮助到需要的朋友

demo项目的结构

直接贴代码了

index.html

mui上拉刷新下拉加载都这里了，两个方法搞定

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

li{

height: 30px;

line-height: 30px;

font-size: 14px;

color: #bbb;

text-indent: 4%;

border-bottom: 1px solid currentColor;

}

var pager = {};//分页

var totalPage;//总页码

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

function pullRefresh(){

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

function getData(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");

var para;

var node;

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

}

})

}

代码就贴完了 就是看起来不是很好看

下面是效果图，想弄视频上来的 然后发现太鸡肋了 弄不上来  气死我了

PS：下面给大家分享一段示例代码：MUI 做上拉下拉加载更多数据小记

html代码

mui('body').on('tap','a',function(){document.location.href=this.href;});//监听让页面A标签的超链接 是有效状态

mui.init({

pullRefresh : {

container:"#pullrefresh",//下拉刷新容器标识，querySelector能定位的css选择器均可，比如：id、.class等

up : {

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

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

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

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

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

callback :function(){

//业务逻辑代码，比如通过ajax从服务器获取新数据；

//注意，加载完新数据后，必须执行如下代码，注意：若为ajax请求，则需将如下代码放置在处理完ajax响应数据之后

//mui('#refresh-ul').pullRefresh().endPullupToRefresh(); //refresh completed

var pagecount=$("#pagecount").val();

var page=$("#page").val();

pagecount=parseInt(pagecount);

page=parseInt(page);

page+=1;

$.ajax({

url:"/mobile/seckill/order/order_refresh_ajax.jhtml",

type: 'post',

datatype:'html',

data: {'pagecount': pagecount,'page':page},

async: false,//false代表只有在等待ajax执行完毕后才执行

success: function(data,msg){

$("#refresh-ul").append(data);

$("#page").val(page);

},

error: function(data,msg){

alert("error");

}

});

this.endPullupToRefresh(false);

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

}

}

});

if(mui.os.plus) {

mui.plusReady(function() {

setTimeout(function() { mui('#pullrefresh').pullRefresh().pullupLoading(); }, 1000);

});

} else {

mui.ready(function() {

mui('#pullrefresh').pullRefresh().pullupLoading();

});

}

function goShoppingCart() {

window.location.href = "/mobile/seckill/shoppingcart.jhtml";

}

总结

以上所述是小编给大家介绍的mui上拉加载更多下拉刷新数据的封装过程，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！