移动端上拉加载下拉刷新插件

官网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();
		}
	})
}