移动端上拉加载更多demo_移动端加载更多demo-优快云博客

本文链接：https://blog.youkuaiyun.com/zeroyulong/article/details/86509529

本文介绍了一种在网页中实现上拉加载更多的方法，通过监听滚动事件并判断元素位置来触发加载新数据的过程，适用于Vue、React及微信小程序等前端框架。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

根据此demo可以自己封装vue,react,微信小程序组件

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>上拉加载</title>
		<script src="../lib/flexible_new.js" type="text/javascript" charset="utf-8"></script>
		
		<style type="text/css">
			.loadContainer li{
				width: 100%;
				height: 5rem;
				background: #9999FF;
			}
			#wrapper{
				height: 1rem;
				background: #FFFF00;
			}
		</style>
	</head>

	<body>
		<ul class="loadContainer" id="container">
			<li>new</li>
			<li>new</li>
			<li>new</li>
			<li>new</li>
			<li>new</li>
			<li>new</li>
			
		</ul>
		<div id="wrapper">加载更多</div>
		<script src="../lib/jquery-1.8.2.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			var liStr = "<li>addss</li><li>addss</li><li>addss</li>"
			var _wrapper = document.getElementById("wrapper")
			
			var doingFlag = false;
			var num = 0;
			var timeoutId;
			function callback() {
				const top = wrapper.getBoundingClientRect().top //核心
				const windowHeight = window.screen.height
				console.log(top,windowHeight)
				if(top && top < windowHeight) {
					console.log(33333)
					loadMoreFn()
				}
			}
			window.addEventListener('scroll', function() { //重点
				if(doingFlag) {
					return
				}
				if(timeoutId) {
					clearTimeout(timeoutId)
				}
				timeoutId = setTimeout(callback, 50)
			}.bind(this), false)
			
			function loadMoreFn(){
				console.log("我要开始加载了")
				doingFlag = true;
				addLi();
			}
			function addLi(){
				$("#container").append(liStr);
				doingFlag = false;
				num++;
				console.log(num);
			}
			
		</script>
	</body>

</html>