mui 上拉加载

1.初始化

var lastPage; //总共页数
var currPage = 1; //当前页码
var counter = 1; //计数器

2.渲染页面数据

function getallData() {
	mui.ajax({　　
		type: 'get',
		url: “接口地址”
		headers: {
			"Authorization": "Bearer " + TOKEN
		},
		success: function(res) {
			lastPage = res.pages.pageCount;
			currPage = res.pages.currentPage;
			var allData = res.items;
			var all = "";
			$.each(allData, function(i, item) {
				all += '<li class="tbody_li">' +
					'<span class="item_name">' + item.realname + '</span>' +
					'<span>' + item.phone + '</span>' +
					'<span class="item_checked">' + (item.is_checked ? '已签到' : '未签到') + '</span>' +
					'<span>' + (item.has_leave ? '请假' : '未请假') + '</span>' +
					'</li>'
			})
			$(all).appendTo(".all")
			counter++            //计数器累加
		},
		error: function(err) {
			mui.toast(err)
		}
	})
}

3.上拉加载事件

function pullupRefresh() {
	vm.loading = true
	setTimeout(function() {
	//判断总页数大于当前页
		if(lastPage > currPage) {
			mui('.allData').pullRefresh().endPullupToRefresh((counter > lastPage));
			getallData();
			vm.loading = false
		} else {
			mui('.allData').pullRefresh().endPullupToRefresh(true);
			vm.loading = false
		}
	}, 1500)
};

4.事件回调

mui(".allData").pullRefresh({
	up: {
		contentrefresh: '正在加载...',
		contentnomore: '没有更多数据了',
		callback: pullupRefresh
	},
})

5.html结构

<div class="allData mui-content mui-scroll-wrapper scroll-height" style="width: 100% !important;">  //重要
	<div class="mui-scroll">      //重要
		<ul class="tbody all">
		</ul>
	</div>
</div>