本文介绍2种方式的上拉加载实现。
1. mui的上拉加载
mui的上拉加载和下拉刷新类似,都属于pullRefresh插件,使用过程如下:
1、页面滚动到底,显示“正在加载...”提示(mui框架提供)
2、执行加载业务数据逻辑(开发者提供)
3、加载完毕,隐藏"正在加载"提示(mui框架提供)
1.1 相对固定的页面结构
<div id="pullrefresh" class="mui-content mui-scroll-wrapper">
<div class="mui-scroll">
<ul class="mui-table-view mui-table-view-chevron" id="olist">
</ul>
</div>
</div>
1.2 初始化
mui.init({
pullRefresh: {
container: '#pullrefresh', //与div的id相同
up: { //up 表示上拉
auto:false, //auto=false,表示页面加载不自动触发上拉。auto=true,触发。
contentrefresh: '正在加载...',
callback: search //上拉触发的函数
}
}
});
var pageNum = 1; //从第一页开始
1.3 上拉触发的函数
function search(){ //下拉触发的函数
var data = {
"pageNum":pageNum //第几页
};
mui.post(orderListURL,data,function(data){
if(data.success){
$.each(data.list,function(i,v){
var each = '<li class="mui-table-view-cell lis">xxxxxxxx</li>';
$("#olist").append(each);
});
pageNum++; //增页
}
},'json');
}
1.4 常用api
参照 http://dev.dcloud.net.cn/mui/pullup/
2. mescroll控件上拉
mescroll是一套精致的上拉js框架,集成到混合app开发中也是不错的。
2.1 相对固定的页面结构
<link rel="stylesheet" type="text/css" href="dist/mescroll.css"/>
<script src="dist/mescroll.min.js" type="text/javascript" charset="utf-8"></script>
<div class="mescroll chhe3" id="mescroll">
<ul class="data-list" id="linelist">
</ul>
</div>
2.2 初始化
var mescroll = null;
$(function(){
mescroll = new MeScroll("mescroll", {
up: {
callback: getListData, //上拉回调,此处可简写; 相当于 callback: function (page) { getListData(page); }
isBounce: false, //此处禁止ios回弹,解析(务必认真阅读,特别是最后一点): http://www.mescroll.com/qa.html#q10
clearEmptyId: "linelist", //1.下拉刷新时会自动先清空此列表,再加入数据; 2.无任何数据时会在此列表自动提示空
toTop:{ //配置回到顶部按钮
src : "res/img/mescroll-totop.png" //默认滚动到1000px显示,可配置offset修改
}
}
});
});
2.3 上拉回调
function getListData(page){ //上拉回调
getListDataFromNet(page.num, page.size, function(curPageData){
console.log("page.num="+page.num+", page.size="+page.size+", curPageData.length="+curPageData.length);
mescroll.endSuccess(curPageData.length); //结束下拉
setListData(curPageData); //下拉数据页面渲染
}, function(){
mescroll.endErr(); //下拉异常
});
}
function getListDataFromNet(pageNum,pageSize,successCallback,errorCallback) { //获取网络数据
var data = {};
var ajaxSt = $.ajax({
type:"post",
url:LineListURL,
data:data,
timeout:30000,
async:true,
dataType:"json",
success:function(data){
if(data.success){
var totalCount = data.totalCount;
successCallback(data.data,totalCount);
}else{
errorCallback();
}
},
complete:function(xmlHttpRequest,status){
if(status=='timeout'){
ajaxSt.abort();
mui.toast('网络错误');
}
}
});
}
function setListData(data){ //页面渲染
$.each(data,function(i,v){
var li = '<li>xxxxxx</li>';
$("#linelist").append(li);
});
}
2.4 常用api
参照 http://www.mescroll.com/api.html
懂Html就能开发App,博文持续更新,博主QQ:260737830!