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