官网http://www.mescroll.com/,官网有很多案例,可以下载下来看一看。
html结构
<!--id可以修改,class不能修改-->
<div id="mescroll" class="mescroll">
<ul id="mediaList" class="media-list">
</ul>
</div>
mescroll 样式
//设置mescroll样式
.mescroll{
position: fixed;
left: 0;
right: 0;
top: 40px;
bottom: 0;
height: auto; /*如设置bottom:50px,则需height:auto才能生效*/
}
js实现
var mescroll = new MeScroll("mescroll", {
//第一个参数"mescroll"对应上面布局结构div的id
//如果下拉刷新是重置列表数据,那么down完全可以不用配置
down: {
callback: downCallback //下拉刷新的回调
},
up: {
htmlLoading: '<p class="upwarp-progress mescroll-rotate"></p>',
//上拉加载中的布局
htmlNodata: '<p class="upwarp-nodata">没有更多了..</p>',
page: {
num: 0,
size: 10,
time: null
},
callback: upCallback //上拉加载的回调
}
});
var pageSize = 10;
//默认加载第一页
function downCallback(page) {//可以添加参数
$.ajax({
url: '???????page=0&size=' + pageSize,
type: 'get',
data: {},
success: function (res) {
$('#mediaList').html('');
mescroll.resetUpScroll();
},
error: function () {
// 联网失败的回调,隐藏下拉刷新的状态
mescroll.endErr();
}
})
}
function upCallback(page) {//可以添加参数
$.ajax({
url: '???????page=' + page.num + '&size=' + page.size,
type: 'get',
data: {},
success: function (data) {
console.log(data);
var list = data;
var html = '';
if (list.length > 0) { //有数据
list.forEach(function (item) {
html += 'xxxx' +
item.title +
'xxxx' +
item.date +
'xxxx';
})
}
$('#mediaList').append(html);
if (data && data.length == page.size) {
//联网成功的回调,隐藏下拉刷新的状态(参数:当前页的数据个数, 是否有下一页true/false);
mescroll.endSuccess(data.length, true);
} else {
//联网成功的回调,隐藏下拉刷新的状态(参数:当前页的数据个数, 是否有下一页true/false);
mescroll.endSuccess(data.length, false);
}
},
error: function () {
// 联网失败的回调,隐藏下拉刷新的状态
mescroll.endErr();
}
})
}