下拉刷新,本文只介绍下拉刷新重置页面的情况。同上一篇博文一样,笔者介绍两种形式的下拉刷新方法。
1. 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',
down: {
style:'circle',
color:'#333333',
callback: pulldownRefresh
}
}
});
var pageNum = 1; //从第一页开始
1.3 下拉触发的函数
function pulldownRefresh(){
//重置数据
var totalPage = 1;
pageNum = 1;
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">xxxx</li>';
$("#olist").append(each);
});
pageNum++; //增页
}
},'json');
mui('#pullrefresh').pullRefresh().endPulldownToRefresh(); //结束下拉刷新
}
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(){
//如果您的下拉刷新是重置列表数据,那么down完全可以不用配置
//解析: down.callback默认调用mescroll.resetUpScroll(),而resetUpScroll会将page.num=1,再触发up.callback
//所以,只用配置上拉加载即可
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修改
}
}
});
});
懂Html就能开发App,博文持续更新,博主QQ:260737830!