iscroll 移動端上拉刷新 下拉加載 實例 ！

iscroll.js  是一款移動端框架， 相信作移動的同窗都有接觸吧， 哈哈 ，  

下面分享一下用法 ， 首先再你的head裏引入iscroll.js 路徑須要自行修改 

<script src="iscroll.js"></script>

　　好吧， 引入之後就該來點實際的啦 ， 

首先你的搭建你的HTML 結構  ： 如如下代碼 ， 運動的對象就是你ID  爲wrapper下的第一個子元素 ,沒辦法誰叫你用的框架呢 。 固然同窗們也能夠自行擴展

	<div id="wrapper">
		<ul>
			<li></li>
			.....
		</ul>
	</div> 

引完js ， 搭建好結構之後  而後再貼入以下腳本

function loaded() {
	pullDownEl = document.getElementById('pullDown');
	pullDownOffset = pullDownEl.offsetHeight;
	pullUpEl = document.getElementById('pullUp');	
	pullUpOffset = pullUpEl.offsetHeight;
	
	myScroll = new iScroll('wrapper', {
		useTransition: true,
		topOffset: pullDownOffset,
		onRefresh: function () {
			if (pullDownEl.className.match('loading')) {
				pullDownEl.className = '';
				pullDownEl.querySelector('.pullDownLabel').innerHTML = '下拉刷新';
			} else if (pullUpEl.className.match('loading')) {
				pullUpEl.className = '';
				pullUpEl.querySelector('.pullUpLabel').innerHTML = '上拉加載更多';
			}
		},
		onScrollMove: function () {
			if (this.y > 5 && !pullDownEl.className.match('flip')) {
				pullDownEl.className = 'flip';
				pullDownEl.querySelector('.pullDownLabel').innerHTML = '鬆開刷新';
				this.minScrollY = 0;
			} else if (this.y < 5 && pullDownEl.className.match('flip')) {
				pullDownEl.className = '';
				pullDownEl.querySelector('.pullDownLabel').innerHTML = '下拉刷新';
				this.minScrollY = -pullDownOffset;
			} else if (this.y < (this.maxScrollY - 10) && !pullUpEl.className.match('flip')) {
				pullUpEl.className = 'flip';
				pullUpEl.querySelector('.pullUpLabel').innerHTML = '鬆開刷新';
				this.maxScrollY = this.maxScrollY;
			} else if (this.y > (this.maxScrollY + 10) && pullUpEl.className.match('flip')) {
				pullUpEl.className = '';
				pullUpEl.querySelector('.pullUpLabel').innerHTML = '上拉加載更多';
				this.maxScrollY = pullUpOffset;
			}
		},
		onScrollEnd: function () {
			if (pullDownEl.className.match('flip')) {
				pullDownEl.className = 'loading';
				pullDownEl.querySelector('.pullDownLabel').innerHTML = '加載中';				
				pullDownAction();	// Execute custom function (ajax call?)
			} else if (pullUpEl.className.match('flip')) {
				pullUpEl.className = 'loading';
				pullUpEl.querySelector('.pullUpLabel').innerHTML = '加載中';				
				pullUpAction();	// Execute custom function (ajax call?)
			}
		}
	});
	
	setTimeout(function () { document.getElementById('wrapper').style.left = '0'; }, 800);
}
document.addEventListener('touchmove', function (e) {  e.preventDefault(); }, false);
document.addEventListener('DOMContentLoaded', function () { setTimeout(loaded, 200); }, false);

準備就緒後 

就應該執行了 

function pullDownAction () { // 下拉刷新
	window.location.reload();
}
var i = 2; //初始化頁碼爲2
function pullUpAction () { 上拉加載更多 
	var page = i++; // 每上拉一次頁碼加一次 （就好比下一頁下一頁）
	Ajax(page); // 運行ajax 把2傳過去告訴後臺我上拉一次後臺要加一頁數據（固然 這個具體傳什麼還得跟後臺配合）
	myScroll.refresh();// <-- Simulate network congestion, remove setTimeout from production!
}
function Ajax(page){ // ajax後臺交互
	$.ajax({
		type : "post", 
		dataType : "JSON",
		url : "/installerAjax", // 你請求的地址
		data : {
			'page': page  // 傳過去的頁碼
		}, 
		success : function(data){
			data =  eval(data.clientList);
 			if(data.length){ // 若是後臺傳過來有數據執行以下操做 ， 沒有就執行else 告訴用戶沒有更多內容呢
				for( var i=0; i<(data.length/2); i++){  // 這裏爲你本身的代碼不要照抄 , 操做你本身後臺返回的數據
					var oLis = "<li><a href='/apps/clientCase?clientId=" +data[i+i].id+ "' class='left'><p class='jsyh_logo'><img src='"+"http://localhost:8080"+ "/" + data[i+i].photo+"'></p><div class='text'><p>" + data[i+i].clientName +"</p><span class='blue_icon'>"+data[i+i].number+"</span></div></a><a href='/apps/clientCase?clientId=" +data[i+i+1].id+ "' class='left'><p class='jsyh_logo'><img src='"+"http://localhost:8080"+ "/" + data[i+i+1].photo+"'></p><div class='text'><p>" + data[i+i+1].clientName +"</p><span class='blue_icon'>"+data[i+i+1].number+"</span></div></a></li>";
					$('ul.customer').append(oLis);
				}
			}else{
				$('.pullUpLabel').html('親，沒有更多內容了！');
			} 

		},
		error : function(){
			
		}
	});
	
}

建議頁面不要大量用到iscroll， 太耗性能