1. 程式人生 > >MUI下拉重新整理和上拉載入功能

MUI下拉重新整理和上拉載入功能

mui.init({
	pullRefresh: {
		container: "#pullrefresh",//下拉載入容器標識,querySelector能定位的css選擇器均可,比如:id、.class等
		up:{
			style:"cirecle",//必選,下拉重新整理樣式,目前支援原生5+"cirecle"樣式
			color:"#2BD009", //可選,預設“#2BD009” 下拉重新整理控制元件顏色
			height:50,//可選,預設50.觸發下拉重新整理拖動距離
			auto:false,//可選,預設false.首次載入自動上拉重新整理一次
			callback:upfunction//必選,重新整理函式,根據具體業務來編寫,比如通過ajax從伺服器獲取新資料;
		}
	}
});
var _self;
	if(window.plus) {
		plusReady();
	} else {
		document.addEventListener("plusready", function() {
			plusReady();
		}, false);
	}
	
	function plusReady() {
		_self = plus.webview.currentWebview();
		_self.setPullToRefresh({
			support: true,
			height: '50px',
			range: '100px',
			style: 'circle',
			offset: '1px'
		}, pulldownRefresh);//上拉重新整理
		plus.key.addEventListener("backbutton",function () {
			_self.close("auto");
		},false);
	}
	
	function downData() {
		var value=$('<li class="mui-table-view-cell mui-media"><a href="javascript:;">'+
					'<img class="mui-media-object mui-pull-left" src="../img/shuijiao.jpg">'+
					'<div class="mui-media-body">幸福<p class="mui-ellipsis">能和心愛的人一起睡覺,是件幸福的事情;'+
					'可是,打呼嚕怎麼辦?</p></div></a></li>');
		
		$("#three_ul").prepend(value);
	}
	function upData() {
		var value=$('<li class="mui-table-view-cell mui-media"><a href="javascript:;">'+
					'<img class="mui-media-object mui-pull-left" src="../img/shuijiao.jpg">'+
					'<div class="mui-media-body">幸福<p class="mui-ellipsis">能和心愛的人一起睡覺,是件幸福的事情;'+
					'可是,打呼嚕怎麼辦?</p></div></a></li>');
	
		$("#three_ul").append(value);
	}
	function pulldownRefresh() {
		setTimeout(function() {
			downData();
			_self.endPullToRefresh();
		}, 1500);
	}
	
	function upfunction(){
		setTimeout(function() {
			upData();
			mui('#pullrefresh').pullRefresh().endPullupToRefresh();
		}, 1500);
	}