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

已于 2022-07-20 14:10:33 修改
阅读量7.3k 收藏 14
点赞数 4
分类专栏： 前端 文章标签： iscroll 上拉加载 下拉刷新 iscroll使用问题 iscroll.js下载
于 2018-12-28 18:49:23 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u012962759/article/details/85329854
版权

在移动端开发中经常会遇到上拉加载下拉刷新的分页的需求，本人在用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>

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

肖波86440
关注
  • 4
    点赞
  • 踩
  • 14
    收藏
    觉得还不错? 一键收藏
  • 20
    评论
专栏目录
vueScroll实现移动端下拉刷新、上拉加载
10-17
主要介绍了vueScroll实现移动端下拉刷新、上拉加载，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
h5单页面上拉刷新下拉加载
10-16
js+css，tab选项卡，每个选项可以上拉刷新数据，下拉加载更多
H5下拉刷新功能实现攻略！
最新发布
weixin_64051447的博客
03-13 1003
本文讲解了下拉的原理、并根据原理写出初始代码。在初始代码的基础上，我解决了 6 个缺陷、做了 2 个优化，实现了一个完善的下拉刷新效果。
H5游戏loading页面样式制作(cocoscreator版)
Mr_JiaTao的博客
04-22 2111
背景 前阵子，美术设计了一个H5游戏loading页面的UI。如图： 刚看到这张UI图的时候，没有很好的实现思路。(第一版UI图，美术少打了一个字母，哈哈哈。)当时，有两个想法： 1、找产品压缩需求，能不能制作一个loading动图放那里，下面的进度条不要。 2、新建一个资源加载场景，场景里面内容就如上图一样，至于最前面的引擎资源加载页面(cocos发布后自动生成的那个黑色资源加载页面)，我给它设置成全透明。因为，进游戏后，先进入资源加载场景，场景资源很少，所以可以很快的进入资源加载页面，然后在资源加载页
H5下拉刷新和上拉加载
Giraffe0615的博客
11-24 4398
在移动端H5网页中，下拉刷新和上拉加载更多数据的交互方式出现频率很高，开源社区也有很多类似的解决方案，如iscroll，pulltorefresh.js库等。下面是对这两种常见交互基本实现原理的阐述。
H5基于iScroll实现下拉刷新和上拉加载更多
08-29
主要为大家详细介绍了H5基于iScroll实现下拉刷新和上拉加载更多效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
H5实现下拉刷新
CodingNoob
05-15 3390
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>H5下拉刷新</title> <style> *{margin:0;padding:0;} #f...
H5如何做页面下拉刷新和上拉加载
weixin_53818172的博客
09-01 1685
【代码】H5如何做页面下拉刷新和上拉加载。
Vue H5端实现上拉加载分页的方式
qq_41429765的博客
06-20 800
滑动页面到底部，触发接口增加条数，怎样去找到这个触底的点。2.文档得完整高度-(滚动条垂直滚动距离+屏幕可视区域)1.滑动页面使用onscroll监听页面滚动。
笔记: 移动端h5 vue3+vue-virtual-scroller加载不定高巨量数据,支持上拉加载,下拉刷新(配合vant PullRefresh)+ 分页加载以及避坑指南
u013505589的博客
04-20 3686
笔记: 移动端h5 vue3+vue-virtual-scroller加载不定高巨量数据,支持上拉加载,下拉刷新(配合vant PullRefresh)+ 分页加载以及避坑指南
jQuery移动端下拉刷新、上拉加载更多插件
08-16
jQuery移动端下拉刷新、上拉加载更多插件，实现移动端常见的下拉刷新和上拉加载更多功能。
基于iscroll.js实现下拉刷新和上拉加载效果
10-21
主要为大家详细介绍了基于iscroll.js实现下拉刷新和上拉加载效果,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
angularjs实现上拉加载和下拉刷新数据功能
10-19
本篇文章主要介绍了angularjs实现上拉加载和下拉刷新数据功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
移动端上拉下拉刷新组件
Ga Ga Love Front
08-04 3297
listloading是一个移动端的上拉、下拉加载更多的组件。主要依赖于iscroll.js v5.1.2基础上开发的组件，基础库可以使用jquery.js或者zepto.js操作dom节点，目前我是使用了zepto.js作为基础库操作dom，以jquery插件的形式存在。如果不想以插件方式使用，则只需要把listloading直接移植你需要的库里面就ok啦。listloading主要针对移动端而生，在使用浏览器自带滚动，用户体验很不友好，与Android和ios差别甚远，所以选择iscroll.js，它实
H5页面点击按钮时的loading图
a527749703的专栏
02-10 6478
今天一个H5页面要求发送数据请求时增加一个loading的图层，于是就自己写了一个。 实现的原理很简单，两个div，z-index设置的大一些，一个div是loading的背景，另外一个自然是旋转的菊花图。 html如下： css样式也比较简单： .modal-bg{ display: none; position: a
记一次 微信公众号 h5页面故障
娃哈哈_的博客
04-25 970
一、问题背景 2020年4月份，公司公众号的H5页面都不能正常渲染页面，一直在加载loading状态。经F12查看，是因为公司引用的talkingdata第三方打点服务发生故障，JS一直处于pending状态， 由于是script同步引入的该JS，导致页面渲染失败。 二、紧急处理办法 屏蔽掉所有的talkingdata服务 三、后续解决方案 1、首先尝试将talkingdata服务由同步引入改...
H5页面实现上拉加载更多
EFFORTS && VALUE
05-24 8475
问题描述：微信公众号开发中，文章列表需要实现与app端相同的上拉加载更多的功能。这里使用的PHP框架为ThinkPHP。解决方式H5页面——首页(显示页)：<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>document</title> <meta name="viewport" content="ini
从零开始学习制作H5应用——V3.0版，loading,背景音乐及自动切换
林中路
06-08 3603
我们的第一个H5应用经过V1.0与V2.0的制作，已经越来越惊艳了，这一次，我们继续来给她梳妆打扮，让她更漂亮。任务 1、加入页面加载完成前的loading动画，提升用户体验； 2、加入背景音乐，自动播放，并添加控制图标，可以控制播放与暂停 3、让页面实现自动切换。 实现第一步：Loading动画index.html …… <body> <div class='loader loa
实现一个移动端的table表格，有上拉加载，下拉刷新h5
06-03
要实现一个移动端的table表格，并且有上拉加载，下拉刷新的功能，你可以使用H5的一些特性，例如`<table>`标签、`<div>`标签、`<ul>`标签、`<li>`标签、CSS3动画、JavaScript等。 以下是一个使用HTML、CSS、JavaScript实现的示例代码： HTML： ```html <!-- table表格容器 --> <div id="table-container"> <!-- 下拉刷新提示 --> <div class="pull-down-refresh"> <span class="loading"></span>下拉刷新 </div> <!-- table表格 --> <table> <thead> <tr> <th>Header 1</th> <th>Header 2</th> <th>Header 3</th> </tr> </thead> <tbody id="table-body"> <tr> <td>Item 1-1</td> <td>Item 1-2</td> <td>Item 1-3</td> </tr> <tr> <td>Item 2-1</td> <td>Item 2-2</td> <td>Item 2-3</td> </tr> <tr> <td>Item 3-1</td> <td>Item 3-2</td> <td>Item 3-3</td> </tr> <!-- 省略更多的表格行 --> </tbody> </table> <!-- 上拉加载提示 --> <div class="pull-up-load"> <span class="loading"></span>上拉加载 </div> </div> ``` CSS： ```css /* table表格容器样式 */ #table-container { height: 100%; overflow-y: auto; } /* 下拉刷新提示样式 */ .pull-down-refresh { height: 50px; line-height: 50px; text-align: center; font-size: 14px; color: #888; position: relative; } .pull-down-refresh .loading { display: inline-block; width: 20px; height: 20px; margin-right: 10px; border-radius: 50%; border: 2px solid #ccc; border-top-color: #07c160; animation: rotate 0.6s linear infinite; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } @keyframes rotate { from { transform: rotate(0); } to { transform: rotate(360deg); } } /* 上拉加载提示样式 */ .pull-up-load { height: 50px; line-height: 50px; text-align: center; font-size: 14px; color: #888; position: relative; } .pull-up-load .loading { display: inline-block; width: 20px; height: 20px; margin-right: 10px; border-radius: 50%; border: 2px solid #ccc; border-top-color: #07c160; animation: rotate 0.6s linear infinite; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } ``` JavaScript： ```javascript // 获取table表格 var table = document.querySelector('table'); // 初始化下拉刷新 var startY = 0; // 记录触摸起始位置 var isPullDown = false; // 是否正在下拉刷新 table.addEventListener('touchstart', function(event) { var touch = event.touches[0]; startY = touch.pageY; }, false); table.addEventListener('touchmove', function(event) { if (isPullDown) { return; } var touch = event.touches[0]; var distance = touch.pageY - startY; if (distance > 0 && table.scrollTop == 0) { // 下拉刷新 isPullDown = true; var refresh = document.querySelector('.pull-down-refresh'); var loading = refresh.querySelector('.loading'); loading.style.display = 'inline-block'; refresh.innerHTML = '<span class="loading"></span>正在刷新'; // 模拟加载数据 setTimeout(function() { // 插入新的表格行 var tbody = document.querySelector('#table-body'); var tr = document.createElement('tr'); tr.innerHTML = '<td>New Item 1</td><td>New Item 2</td><td>New Item 3</td>'; tbody.insertBefore(tr, tbody.firstChild); // 结束下拉刷新 loading.style.display = 'none'; refresh.innerHTML = '<span class="loading"></span>下拉刷新'; isPullDown = false; }, 1000); } }, false); // 初始化上拉加载 var isPullUp = false; // 是否正在上拉加载 table.addEventListener('scroll', function(event) { var tbody = document.querySelector('#table-body'); var height = tbody.offsetHeight; var top = table.scrollTop; var clientHeight = table.clientHeight; if (height - top - clientHeight < 50 && !isPullUp) { // 上拉加载 isPullUp = true; var load = document.querySelector('.pull-up-load'); var loading = load.querySelector('.loading'); loading.style.display = 'inline-block'; load.innerHTML = '<span class="loading"></span>正在加载'; // 模拟加载数据 setTimeout(function() { // 插入新的表格行 var tr = document.createElement('tr'); tr.innerHTML = '<td>New Item 1</td><td>New Item 2</td><td>New Item 3</td>'; tbody.appendChild(tr); // 结束上拉加载 loading.style.display = 'none'; load.innerHTML = '<span class="loading"></span>上拉加载'; isPullUp = false; }, 1000); } }, false); ``` 注意：这只是一个简单的示例代码，实际情况可能需要更复杂的代码来满足需求。另外，上拉加载和下拉刷新功能需要与后端API接口配合使用。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 20
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值