mui组件的下拉刷新上拉加载实现

引入mui组件官方ji,css是必不可少的

//最开始初始化
mui.init({
	pullRefresh: {
		container: '#pullrefresh',
		down: {
			style: 'circle',
			offset: '0px',
			auto: true,//可选,默认false.首次加载自动上拉加载一次,
			callback: pulldownRefresh //返回调用的函数
		},
		up: {
			auto:true,
			contentrefresh: '正在加载...',
			callback: pullupRefresh //返回调用的函数
		}
	}
});	
//定义全局变量
var AppData = {
		total:0,
		items:[],
		searchData:{
			js:2,
			pageIndex:0,
			pageSize:10,
		}
	}
  	function pulldownRefresh() {//下拉刷新页面
		if(window.plus && plus.networkinfo.getCurrentType() === plus.networkinfo.CONNECTION_NONE) {
			plus.nativeUI.toast('似乎已断开与互联网的连接', {
				verticalAlign: 'top'
			});
			return;
		}		
		
		firstLoadData();//第一次加载数据
		mui('#pullrefresh').pullRefresh().endPulldownToRefresh();
	}
	function firstLoadData(){
		AppData.items =[];
		AppData.total = 0;
		AppData.searchData.pageIndex = 0;
		QualityReportList();
		mui('#pullrefresh').pullRefresh().refresh(true);
	}
  //上移加载获取最新列表 
	function pullupRefresh() {
		var count = AppData.items.length;	
		setTimeout(function() {
			if(++count > AppData.total){
				mui('#pullrefresh').pullRefresh().endPullupToRefresh(true); //参数为true代表没有更多数据了。
			} else {
				mui('#pullrefresh').pullRefresh().endPullupToRefresh(false); //参数为true代表没有更多数据了。
				AppData.searchData.pageIndex +=1; 
				List();
			}
		}, 1000);
	}
function List() {
	Query(AppData.searchData,function(data){//调用接口，传参
			if(!mui.isEmpty(data)){
				if(!mui.isEmpty(data.total)){
					AppData.total = parseInt(data.total);
				}
				if(!mui.isEmpty(data.data) && data.data.length > 0){
					AppData.items.push.apply(AppData.items, data.data);	
				}
				innerHTMLRender();
			}else {
				mui('#pullrefresh').pullRefresh().endPullupToRefresh(true);
			}
		});		
}

function innerHTMLRender(){
	xxxx//页面内容的渲染
}