mui 下拉刷新

一個簡單的實現! 記錄下

<div id="refreshContainer" class="mui-content mui-scroll-wrapper">
	<header id="header" class="mui-bar mui-bar-nav">
		<h1 class="mui-title">調度監控</h1>
		<button id='setting' class=" mui-pull-right mui-btn-link">設置</button>
	</header>
	<div class="mui-content">
	</div>
</div>


(function($, doc) {
	$.init({
		gestureConfig: {
			longtap: true
		},
		pullRefresh : {
			container:"#refreshContainer",//下拉刷新容器標識
			down : {
				style:'circle',//必選,下拉刷新樣式
				color:'#2BD009', //可選,下拉刷新控件顏色
				height:'50px',//可選,默認50px.下拉刷新控件的高度,
				range:'100px', //可選 默認100px,控件可下拉拖拽的範圍
				offset:'0px', //可選 默認0px,下拉刷新控件的起始位置
				auto: true,//可選,默認false.首次加載自動上拉刷新一次
				callback : function(){
					callfunction(); //刷新執行的回調函數
				},
			}
		}
	});

	function callfunction() {
		loadPage();
		setTimeout(function () {
			//關閉‘正在刷新’的樣式提示
			mui('#refreshContainer').pullRefresh().endPulldownToRefresh(); 
		}, 1000);
	}

	var loadPage = null;
	var loadMark = null;

	$.plusReady(function() {
		var monitorMark = null;
		loadPage = function(){
			clearInterval(monitorMark);
			//DO SOMETHING
			console.log('loadPage ====================================');
			monitorMark = setInterval(loadMark,2000);
		}
		loadMark = function(){
			console.log('loadMark ====================================');
		}
	}
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章