iScroll的Demo实例

第一步: 引入iscroll-probe.js和jquery.min.js

第二步:html文档结构

        <div id="wrapper">
			<div id="scroller">
				<div id="pullDown" class="">
					<div class="pullDownLabel"></div>
				</div>
				<div class="pulldown-tips">下拉刷新</div>
				<ul id="list">
					<li>Pretty row 1</li>
					<li>Pretty row 2</li>
					<li>Pretty row 3</li>
					<li>Pretty row 4</li>
					<li>Pretty row 5</li>
					<li>Pretty row 6</li>
					<li>Pretty row 7</li>
					<li>Pretty row 8</li>
					<li>Pretty row 9</li>
					<li>Pretty row 10</li>
					<li>Pretty row 11</li>
					<li>Pretty row 12</li>
					<li>Pretty row 13</li>
					<li>Pretty row 14</li>
					<li>Pretty row 15</li>
					<li>Pretty row 16</li>
					<li>Pretty row 17</li>
					<li>Pretty row 18</li>
					<li>Pretty row 19</li>
					<li>Pretty row 20</li>
					<li>Pretty row 13</li>
					<li>Pretty row 14</li>
					<li>Pretty row 15</li>
					<li>Pretty row 16</li>
					<li>Pretty row 17</li>
					<li>Pretty row 18</li>
					<li>Pretty row 19</li>
					<li>Pretty row 20</li>
				</ul>
				<div id="pullUp" class="">
					<div class="pullUpLabel">加载更多</div>
				</div>
			</div>
		</div>

第三步:css样式

<style type="text/css">
			* {
				-webkit-box-sizing: border-box;
				-moz-box-sizing: border-box;
				box-sizing: border-box;
			}
			
			html {
				-ms-touch-action: none;
			}
			
			body,
			ul,
			li {
				padding: 0;
				margin: 0;
				border: 0;
			}
			
			body {
				font-size: 12px;
				font-family: ubuntu, helvetica, arial;
				overflow: hidden;
				/* this is important to prevent the whole page to bounce */
			}
			
			#header {
				position: absolute;
				z-index: 2;
				top: 0;
				left: 0;
				width: 100%;
				height: 45px;
				line-height: 45px;
				background: #CD235C;
				padding: 0;
				color: #eee;
				font-size: 20px;
				text-align: center;
				font-weight: bold;
			}
			
			#footer {
				position: absolute;
				z-index: 2;
				bottom: 0;
				left: 0;
				width: 100%;
				height: 48px;
				background: #444;
				padding: 0;
				border-top: 1px solid #444;
			}
			
			#wrapper {
				position: absolute;
				z-index: 1;
				top: 0;
				bottom: 0;
				left: 0;
				width: 100%;
				background: #fff;/*上拉下拉背景颜色*/
				overflow: hidden;
			}
			
			#scroller {
				position: absolute;
				z-index: 1;
				-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
				width: 100%;
				-webkit-transform: translateZ(0);
				-moz-transform: translateZ(0);
				-ms-transform: translateZ(0);
				-o-transform: translateZ(0);
				transform: translateZ(0);
				-webkit-touch-callout: none;
				-webkit-user-select: none;
				-moz-user-select: none;
				-ms-user-select: none;
				user-select: none;
				-webkit-text-size-adjust: none;
				-moz-text-size-adjust: none;
				-ms-text-size-adjust: none;
				-o-text-size-adjust: none;
				text-size-adjust: none;
			}
			
			#scroller ul {
				list-style: none;
				padding: 0;
				margin: 0;
				width: 100%;
				text-align: left;
			}
			
			#scroller li {
				padding: 0 10px;
				height: 40px;
				line-height: 40px;
				border-bottom: 1px solid #ccc;
				border-top: 1px solid #fff;
				background-color: #fafafa;
				font-size: 14px;
			}
			
			#pullDown,
			#pullUp,
			.pulldown-tips {
				height: 40px;
				line-height: 40px;
				text-align: center;
			}
			
			.pulldown-tips {
				position: absolute;
				top: -40px;
				left: 0;
				width: 100%;
			}
		</style>

第四步:js部分

function load() {
	var myScroll,
		pullDown = $("#pullDown"),
		pullUp = $("#pullUp"),
		pullDownLabel = $(".pullDownLabel"),
		pullUpLabel = $(".pullUpLabel"),
		container = $('#list'),
		loadingStep = 0; //加载状态0默认，1显示加载状态，2执行加载数据，只有当为0时才能再次加载，这是防止过快拉动刷新  

	pullDown.hide();
	pullUp.hide();

	myScroll = new IScroll("#wrapper", {
		scrollbars: true,
		mouseWheel: true,
		interactiveScrollbars: true,
		shrinkScrollbars: 'scale',
		fadeScrollbars: true,
		scrollY: true,
		probeType: 2,
		bindToWrapper: true
	});
	myScroll.on("scroll", function() {
		if(loadingStep == 0 && !pullDown.attr("class").match('refresh|loading') && !pullUp.attr("class").match('refresh')) {
			if(this.y > 40) { //下拉刷新操作  
				$(".pulldown-tips").hide();
				pullDown.addClass("refresh").show();
				pullDownLabel.text("松手刷新数据");
				loadingStep = 1;
				myScroll.refresh();
			} else if(this.y < (this.maxScrollY - 14)) { //上拉加载更多  
				pullUp.addClass("refresh").show();
				pullUpLabel.text("正在加载");
				loadingStep = 1;
				pullUpAction();
			}
		}
	});
	myScroll.on("scrollEnd", function() {
		if(loadingStep == 1) {
			if(pullDown.attr("class").match("refresh")) { //下拉刷新操作  
				pullDown.removeClass("refresh").addClass("loading");
				pullDownLabel.text("正在刷新");
				loadingStep = 2;
				pullDownAction();
			}
		}
	});
	/**
	 * 下拉加载事件
	 */
	function pullDownAction() {
		setTimeout(function() {
			var li, i;
			for(i = 0, li = ""; i < 3; i++) {
				li += "<li>" + "new Add " + new Date().toLocaleString() + " ！" + "</li>";
			}
			container.prepend(li);
			pullDown.attr('class', '').hide();
			myScroll.refresh();
			loadingStep = 0;
			$(".pulldown-tips").show();
		}, 1000);
	}
	/**
	 * 上拉加载
	 */
	function pullUpAction() {
		setTimeout(function() {
			var li, i;
			for(i = 0, li = ""; i < 3; i++) {
				li += "<li>" + "new Add " + new Date().toLocaleString() + " ！" + "</li>";
			}
			container.append(li);
			pullUp.attr('class', '').hide();
			myScroll.refresh();
			loadingStep = 0;
		}, 1000);
	}

	document.addEventListener('touchmove', function(e) {
		e.preventDefault();
	}, false);
}

效果图