js H5实现下拉刷新功能(马井堂)

2021-12-21 13:31:42 阅读：218 来源： 互联网

标签：loading top js touch 马井堂朋友圈 var H5 scroll

H5实现下拉刷新功能,下面提供一个示例：

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>H5实现下拉刷新功能--Document</title>
<title>Pull to Refresh</title>
<meta name="viewport" content="width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-scalable=no;" />
<style>
div {
	position: absolute;
	top: 0px;
	bottom: 0px;
	width: 100%;
	left: 0px;
	overflow: hidden;
}
li {
	list-style-type: none;
	height: 35px;
	background: gainsboro;
	border-bottom: solid 1px #fff;
	text-align: left;
	line-height: 35px;
	padding-left: 15px;
}
ul {
	width: 100%;
	margin-top: 0px;
	position: absolute;
	left: 0px;
	padding: 0px;
	top: 0px;
}
</style>
</head>

<body>
<div class="outerScroller">
<ul class='scroll'>
	<li>朋友圈1</li>
	<li>朋友圈2</li>
	<li>朋友圈3</li>
	<li>朋友圈4</li>
	<li>朋友圈5</li>
	<li>朋友圈6</li>
	<li>朋友圈7</li>
	<li>朋友圈8</li>
	<li>朋友圈9</li>
	<li>朋友圈10</li>
</ul>
<div id="loading" style="display:none;text-align: center;">
加载中...
</div>
</div>
<script>
	var scroll = document.querySelector('.scroll');
	var outerScroller = document.querySelector('.outerScroller');
	var touchStart = 0;
	var touchDis = 0;
	outerScroller.addEventListener('touchstart', function (event) {
	var touch = event.targetTouches[0];
	// 把元素放在手指所在的位置
	console.log('99393939majigntang');
	touchStart = touch.pageY;
	console.log(touchStart);
	}, false);
	outerScroller.addEventListener('touchmove', function (event) {
	// 开始loading
	var top = scroll.offsetTop;
	var loading = document.getElementById('loading');
	if (top > 30) {
	loading.style.display = "block"
	};
	// 开始loading - end
	
	var touch = event.targetTouches[0];
	// console.log(touch.pageY + 'px');
	scroll.style.top = scroll.offsetTop + touch.pageY - touchStart + 'px';
	// console.log(scroll.style.top);
	touchStart = touch.pageY;
	touchDis = touch.pageY - touchStart;
	}, false);
	outerScroller.addEventListener('touchend', function (event) {
	// 结束loading
	var loading = document.getElementById('loading');
	loading.style.display = "none"
	touchStart = 0;
	var top = scroll.offsetTop;
	// console.log('手动触发结束');
	console.log(top);
	if (top > 30) refresh();
	if (top > 0) {
	var time = setInterval(function () {
	scroll.style.top = scroll.offsetTop - 2 + 'px';
	if (scroll.offsetTop <= 0) clearInterval(time);
	}, 1)
	}
	}, false);
	function refresh() {
	//这里是后台数据
	for (var i = 3; i > 0; i--) {
	var node = document.createElement("li");
	node.innerHTML = "I'm new" + i;
	scroll.insertBefore(node, scroll.firstChild);
	}
	}
</script>
</body>
</html>

这个示例基本可实现效果了

标签：loading,top,js,touch,马井堂,朋友圈,var,H5,scroll
来源： https://blog.csdn.net/weixin_39501680/article/details/122059944

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

js H5实现下拉刷新功能(马井堂)