h5实现下拉刷新上拉加载（兼容iOS手机）

肖波86440

已于 2022-07-20 14:10:33 修改

阅读量7.5k

点赞数 4

分类专栏：前端文章标签： iscroll 上拉加载下拉刷新 iscroll使用问题 iscroll.js下载

于 2018-12-28 18:49:23 首次发布

本文链接：https://blog.csdn.net/u012962759/article/details/85329854

版权

前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

在移动端开发中经常会遇到上拉加载下拉刷新的分页的需求，本人在用jquery weui框架中的相应扩展组件的时候发现不太好用，于是有找了一下，发现了一个非常不错的组件iscroll4.js,现在好像官网不能进了，这里附一个下载链接:下载iscroll4.js.

查看演示:iscrollDemo

我们先来看一下属性。

属性：

scrollbars: false 是否显示滚动条。默认为false;也可以单独设置横向和纵向

fadeScrollbars:true 滚动条淡入淡出效果,当然前提是你滚动条显示了。默认为false;

interactiveScrollbars 是否拖动滚动条。默认为false;

resizeScrollbars 滚动条的长度是按照比例设置的，如果想要固定尺寸，可以设置为flase;默认为true;

bounce: false 滚动到达容器边界时是否执行反弹动画。默认为true;

click:true iScroll禁止默认鼠标的点击行为，如果要使用设置true;默认为false;

。。。。。。不在一一列出,

下面看一下注意事项：

1：滚动容器需要是绝对定位,及position:absolute;

2：滚动容器里面只有第一个元素能滚动，因而一般滚动容器里面一般只放一个元素，在这个元素里面再显示数据

3：上拉的时候回弹回，每次在更新完成滚动容器里面的数据之后需要调用refresh();方法，可以消除此问题

下面来看例子:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<title>isCrollDemo</title>
		<style>
			html,
			body {
				height: 100%;
			}

			body {
				background-color: #f5fafe;
				color: #000;
				font-family: "微软雅黑";
				font-size: 13px;
			}

			li {
				text-align: center;
				list-style: none;
				margin-right: 40px;
			}

			#wrapper {
				position: absolute;
				top: 1px;
				bottom: 1px;
				left: 0;
				width: 100%
			}

			#scroller li {
				height: 60px;
				line-height: 60px;
				background: #ecf6ff;
				margin-top: 10px
			}

			#pullDown,
			#pullUp {
				padding: 0 10px;
				height: 30px;
				line-height: 30px;
				color: #888;
				text-align: center
			}
		</style>
	</head>
	<body>


		<div id="wrapper">
			<div id="scroller">
				<div id="pullDown">
					<span class="pullDownLabel">下拉刷新</span>
				</div>
				<!-- </ul> -->
				<ul id="ulData">
					<li> 1111</li>
					<li> 1111</li>

				</ul>
				<div id="pullUp" class="weui-loadmore">

					<span class="pullUpLabel weui-loadmore__tips">上拉加载更多</span>
				</div>
			</div>
		</div>
		<script src="js/iscroll4.js"></script>

		<script>
			var mScroll;
			var isRefresh = true;
			var p = 1; //当前页码
			var onePageCount = 20; //每页显示多少个
			window.onload = function() {
				mScroll = PullDownAddUP("wrapper", function(loadType) {
					if (loadType == "refresh") { //下拉刷新
						isRefresh = true;
					} else { //上拉加载
						isRefresh = false;
					}
					loadData();
				});
				loadData();

			}

			function loadData() {
				if (isRefresh) {
					p = 1;
					document.getElementById("ulData").innerHTML = "";
				} else {
					p++;
				}

				setTimeout(function() {
					var htm = document.getElementById("ulData").innerHTML;
					for (var i = onePageCount * (p - 1); i < onePageCount * p; i++) {
						htm += '<li> ' + '我是第' + (i + 1) + '个,属于第' + p + '页' + '</li>';
					}

					document.getElementById("ulData").innerHTML = htm;
					mScroll.refresh(); //数据加载完成一定要调用此方法,否则上拉会反弹

				}, 1000);

			}


			/**
			 *此方法可以写到公用的类里面，然后调用 ,
			 * 下拉刷新的id一定要是 【pullDown】，上拉加载的id一定要是【pullUp】
			 *
			 * 用iScroll4.js实现上拉加载和下拉刷新
			 * @param wrapperId 滚动容器的 elementId
			 * @param callbc  滚动回调，参数：refresh 表示下拉刷新，loadmore 表示上拉加载
			 * 
			 * @return myScroll 将对象返回（注意，在执行完成数据刷新/加载之后要调用 myScroll.refresh(),否则会上拉会反弹）
			 */
			function PullDownAddUP(wrapperId, callbc) {
				var myScroll, pullDownEl, pullDownOffset, pullUpEl, pullUpOffset, generatedCount = 0;
				var isRefresh = true,
					isLoadMore = true;
				var option = {};
				option.hScrollbar = false;//纵向滚动条
				option.vScrollbar = false;//横向滚动条
				option.useTransition = true;



				//动画部分
				try {
					pullDownEl = document.getElementById('pullDown');
                    pullUpOffset = pullUpEl.offsetHeight;


				} catch (e) {
					isRefresh = false;
				}
				try {
					pullUpEl = document.getElementById('pullUp');
					pullUpOffset = pullUpEl.offsetHeight;
				} catch (e) {
					isLoadMore = false;
				}

				if (isRefresh) {
					if (isLoadMore) {
						option.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 = '上拉加载更多';
							}
						};
						option.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 - 5) && !pullUpEl.className.match('flip')) {
								pullUpEl.className = 'flip';
								pullUpEl.querySelector('.pullUpLabel').innerHTML = '释放加载';
								this.maxScrollY = this.maxScrollY;
							} else if (this.y > (this.maxScrollY + 5) && pullUpEl.className.match('flip')) {
								pullUpEl.className = '';
								pullUpEl.querySelector('.pullUpLabel').innerHTML = '上拉加载更多...';
								this.maxScrollY = pullUpOffset;
							}
						};
						option.onScrollEnd = function() {
							if (pullDownEl.className.match('flip')) {
								pullDownEl.className = 'loading';
								pullDownEl.querySelector('.pullDownLabel').innerHTML = '加载中';
								callbc("refresh"); // Execute custom function (ajax call?)
							} else if (pullUpEl.className.match('flip')) {
								pullUpEl.className = 'loading';
								pullUpEl.querySelector('.pullUpLabel').innerHTML = '加载中';
								callbc("loadmore"); // Execute custom function (ajax call?)
							}
						};
					} else {
						option.onRefresh = function() {
							if (pullDownEl.className.match('loading')) {
								pullDownEl.className = '';
								pullDownEl.querySelector('.pullDownLabel').innerHTML = '下拉刷新';
							}
						};
						option.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;
							}
						};
						option.onScrollEnd = function() {
							if (pullDownEl.className.match('flip')) {
								pullDownEl.className = 'loading';
								pullDownEl.querySelector('.pullDownLabel').innerHTML = '加载中';
								callbc("refresh"); // Execute custom function (ajax call?)
							}
						};
					}
				} else {
					if (isLoadMore) {
						option.onRefresh = function() {
							if (pullUpEl.className.match('loading')) {
								pullUpEl.className = '';
								pullUpEl.querySelector('.pullUpLabel').innerHTML = '上拉加载更多';
							}
						};
						option.onScrollMove = function() {
							if (this.y < (this.maxScrollY - 5) && !pullUpEl.className.match('flip')) {
								pullUpEl.className = 'flip';
								pullUpEl.querySelector('.pullUpLabel').innerHTML = '释放加载';
								this.maxScrollY = this.maxScrollY;
							} else if (this.y > (this.maxScrollY + 5) && pullUpEl.className.match('flip')) {
								pullUpEl.className = '';
								pullUpEl.querySelector('.pullUpLabel').innerHTML = '上拉加载更多...';
								this.maxScrollY = pullUpOffset;
							}
						};
						option.onScrollEnd = function() {
							if (pullUpEl.className.match('flip')) {
								pullUpEl.className = 'loading';
								pullUpEl.querySelector('.pullUpLabel').innerHTML = '加载中';
								callbc("loadmore"); // Execute custom function (ajax call?)
							}
						};
					} else {
						option.onRefresh = function() {
							//if (pullDownEl.className.match('loading')) {
							//	pullDownEl.className = '';
							//	pullDownEl.querySelector('.pullDownLabel').innerHTML = '下拉刷新';
							//} 
						};

					}
				}



				myScroll = new iScroll('wrapper', option);

				return myScroll;
			}
		</script>
	</body>
</html>

以上就是示例代码，可以拷贝出来直接测试。