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， 太耗性能