IScroll5实现下拉刷新上拉加载更

最新推荐文章于 2024-07-12 08:49:54 发布

快进小树林

最新推荐文章于 2024-07-12 08:49:54 发布

阅读量2.7w

点赞数 7

分类专栏：插件使用文章标签：插件 IScroll5 实例

本文链接：https://blog.csdn.net/chenzhiyong12/article/details/52229658

版权

插件使用专栏收录该内容

3 篇文章 0 订阅

订阅专栏

声明：虽然本文章为原创，但是很大部分参考了博客园博主MRxia的一篇iscroll的下拉刷新的实现方式，我个人把demo简化了一下，具体原来的demo可以参考：点击打开链接

实现效果：类似网易新闻加载新闻列表（好吧，我的只能算是基础版，如要添加动图或者css样式或者canvas效果请自行脑补）

外部引入js文件，必须是iscroll-probe.js，这点是很重要的，因为基础版的 iscroll.js 插件并不支持实例化的IScroll对象的on事件绑定，当然还是要引入jquery简化一下开发

以下是全局的css样式，当然你也可以直接复制过去，前面的是默认的iscroll的demo的样式，后面的pulldown-tips样式是作为绝对定位，当用户下拉不超过40px时显示“下拉刷新”的提示，下拉刷新后会被隐藏起来

<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: 45px;
	bottom: 48px;
	left: 0;
	width: 100%;
	background: #ccc;
	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>

html结构在默认demo的基础上在scoller里面添加刷新/加载数据提示

<body οnlοad="load()">
<div id="header">iScroll</div>
<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>
		</ul>
		<div id="pullUp" class="">
		<div class="pullUpLabel">加载更多</div>
		</div>
	</div>
</div>

<div id="footer"></div>

</body>

js需要说明的是，这里的scroll事件当然不是原生dom的scroll事件，而是IScroll对象的滚动事件，类似touchmove事件，scrollEnd事件也类似touchend事件，在滚动结束后执行

<script type="text/javascript">

	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: false,
				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);
		}


</script>

如有出错，欢迎指正 PS：测试环境在firefox的响应式开发环境下运行