iscroll 用法

iscroll 用法

iscroll.js 插件
iScroll 5参考文档 http://www.mamicode.com/info-detail-331827.html
github 下载地址 https://github.com/cubiq/iscroll

iScroll 5 有参考文档，如何使用请参看文档！

iscroll.js使用 直接上代码：

var pageIndex = 1;
var pageTotal = null;
var isOver = false;

loadList(url,pageIndex);

var myScroll,
	pullDownEl, 
	pullDownOffset,
	pullUpEl, 
	pullUpOffset,
	generatedCount = 0;
function pullDownAction () {
	$('#platformList').html('');
	loadList(url,1);
	document.getElementById("pullUp").style.display="";
	pageIndex = 1;
	isOver = false;
	setTimeout(loadRefresh, 1000);
}

function pullUpAction () {
	if(!isOver){
		pageIndex++;
		loadList(url,pageIndex);
	}
	setTimeout(loadRefresh, 800);
}

function loadRefresh(){
	myScroll.refresh();
}

function loaded() {
	pullDownEl = document.getElementById('pullDown');
	pullDownOffset = pullDownEl.offsetHeight;
	pullUpEl = document.getElementById('pullUp');	
	pullUpOffset = 10;
	
	myScroll = new iScroll('pullrefresh', {
		useTransition: true,
		topOffset: pullDownOffset,
		onRefresh: function () {
			if (pullDownEl.className.match('loading')) {
				pullDownEl.className = '';
				pullDownEl.querySelector('.pullDownLabel').innerHTML = '向下拖动刷新页面';
				$('#pullDownIcon').removeClass('loadingicon');
			}
			if (pullUpEl.className.match('loading')) {
				pullUpEl.className = '';
				pullUpEl.querySelector('.pullUpLabel').innerHTML = '向上拖动加载更多';
				$('#pullUpIcon').removeClass('loadingicon');
			}
		},
		onScrollMove: function () {
			
			if (this.y > 0) {
				pullDownEl.className = 'flip';
				pullDownEl.querySelector('.pullDownLabel').innerHTML = '松开加载数据...';
				$('#pullDownIcon').removeClass('loadingicon');
				this.minScrollY = 0;
			}
			if (this.y < 0 && pullDownEl.className.match('flip')) {
				pullDownEl.className = '';
				pullDownEl.querySelector('.pullDownLabel').innerHTML = '向下拖动刷新页面';
				$('#pullDownIcon').removeClass('loadingicon');
				this.minScrollY = -pullDownOffset;
			}
			
			if ( this.scrollerH < this.wrapperH && this.y < (this.minScrollY-pullUpOffset) || this.scrollerH > this.wrapperH && this.y < (this.maxScrollY - pullUpOffset) ) {
				document.getElementById("pullUp").style.display="";
				pullUpEl.className = 'flip';
				pullUpEl.querySelector('.pullUpLabel').innerHTML = '松开加载数据...';
				$('#pullUpIcon').removeClass('loadingicon');
			} 
			if (this.scrollerH < this.wrapperH && this.y > (this.minScrollY-pullUpOffset) && pullUpEl.className.match('flip') || this.scrollerH > this.wrapperH && this.y > (this.maxScrollY - pullUpOffset) && pullUpEl.className.match('flip')) {
				document.getElementById("pullUp").style.display="none";
				pullUpEl.className = '';
				pullUpEl.querySelector('.pullUpLabel').innerHTML = '向上拖动加载更多';
				$('#pullUpIcon').removeClass('loadingicon');
			}
		},
		onScrollEnd: function () {
			if (pullDownEl.className.match('flip')) {
				pullDownEl.className = 'loading';
				pullDownEl.querySelector('.pullDownLabel').innerHTML = '加载中...';
				$('#pullDownIcon').addClass('loadingicon');
				pullDownAction();
			} 
			if (pullUpEl.className.match('flip')) {
				document.getElementById("pullUp").style.display="block";
				if(isOver){
					pullUpEl.className = 'ended';
					pullUpEl.querySelector('.pullUpLabel').innerHTML = '没有更多数据了...';
					$('#pullUpIcon').removeClass('loadingicon');
					$('#pullUpIcon').removeClass('pullUpIcon');
				}else{
					pullUpEl.className = 'loading';
					pullUpEl.querySelector('.pullUpLabel').innerHTML = '加载中...';
					$('#pullUpIcon').addClass('loadingicon');
					setTimeout(pullUpAction,1000);
				}
				
			}
		}
	});

}

document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
document.addEventListener('DOMContentLoaded', function () {setTimeout(loaded, 800);}, false);
//load list 
function loadList(url,pageIndex){
	$.ajax({
		type:'POST',
		url:url+'',
		dataType:'json',
		data:{
			pageNum:pageIndex, //当前页
			pageDataCount:20 //每页的数据条数
		},
		success:function(data){
			if(data.code == 5000 ){
				pageTotal = data.pages;
				if(data.pageList.length !== 0){
					var platformListHtml = '';
					for(var i=0;i<data.pageList.length;i++){
						platformListHtml += '<div> 插入 html 代码 </div>'
					}
					$('#platformList').append(platformListHtml);
				}
				
				if(pageIndex == pageTotal){
					isOver = true;
				}
			}
		}
	});
}

以上代码没有特别注释，此处只代表个人使用 iscroll.js 这个插件方便查看，不做访客使用；
但值得说明的是在使用前，必须先初始化；

各位进来的访客如有兴致可在下方评论！