前端实现上拉加载数据（未使用插件）_前端上划加载新数据-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_42018790/article/details/80705226

本文介绍了一种手写实现上拉加载的方法，包括HTML结构、CSS样式和JavaScript逻辑。通过监听滚动事件，实现数据的分页加载，并展示了完整的代码实现。

现在开发项目很多时候依赖于插件，很少去手动实现一些实用的功能了，最近项目中用到了上拉加载（其实本心一直认为只要是列表性的东西就应该主动实现上拉加载，可是因为懒，很少弄，懒也是种病，得治），项目中用了dropload插件，很快捷实现了，但还是觉得很繁琐，最近闲下来了，就试着自己实现一下，实现思路在代码中，不多说啦，代码如下，不足之处，多多指正！

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
		<meta content="yes" name="apple-mobile-web-app-capable" />
		<meta content="black" name="apple-mobile-web-app-status-bar-style" />
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>上拉加载</title>
		<script src="js/useRem.js"></script>
		<link rel="stylesheet" href="css/reset.css" />
		<style>
			* {
				margin: 0;
				padding: 0;
				list-style: none;
				font-size: 0.3rem;
			}
			
			li {
				height: 3rem;
				line-height: 3rem;
				text-align: center;
				border-bottom: 1px solid #ddd;
			}
			
			.more {
				width: 100%;
				font-size: 0.26rem;
				text-align: center;
				line-height: 0.8rem;
				display: none;
			}
			
			.loader-inner {
				width: 25px;
				height: 25px;
				margin: 0 auto;
				display: none;
			}
			
			.ball-clip-rotate>div {
				background-color: #000;
				border-radius: 100%;
				margin: 2px;
				-webkit-animation-fill-mode: both;
				animation-fill-mode: both;
				border: 2px solid #000;
				border-bottom-color: transparent;
				height: 25px;
				width: 25px;
				background: transparent !important;
				display: inline-block;
				-webkit-animation: rotate 0.75s 0s linear infinite;
				animation: rotate 0.75s 0s linear infinite;
			}
			
			.loader-inner p {
				display: none;
			}
			
			@keyframes rotate {
				0% {
					-webkit-transform: rotate(0deg) scale(1);
					transform: rotate(0deg) scale(1);
				}
				50% {
					-webkit-transform: rotate(180deg) scale(0.6);
					transform: rotate(180deg) scale(0.6);
				}
				100% {
					-webkit-transform: rotate(360deg) scale(1);
					transform: rotate(360deg) scale(1);
				}
			}
		</style>
	</head>

	<body>
		<div class="load">
			<!--列表区域-->
			<ul></ul>
			<!--loading图标-->
			<div class="loader-inner ball-clip-rotate">
				<div></div>
			</div>
			<!--没有更多的提示-->
			<div class="more">
				没有更多
			</div>
		</div>

		<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/common.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			//实现思路
			//首先需要后台配合接口支持传递每页个数、页码、并可以返回总页码数
			//确定首次进入渲染列表的个数，首次渲染1页 N个 以参数传递给后台，获取数据，渲染页面
			//当距离顶部+当前高度 >=文档总高度 即代表滑动到底部 时，让页码page++，  再次触发获取列表的函数  
			//通过判断后台返回的总页数  == 我们的页数的时候赋值给isEnd为true,停止加载		
			var token = getToken('bulaapi_token');
			var rank = getToken('rank');
			var page = 1;
			var renderHtml = '';
			var isEnd = false;
			getList(page);
			function getList(page) {
				//如果没有更多则返回
				if(isEnd) {
					return
				} else {
					//否则加载更多
					$('.loader-inner').show()
					$.ajax({
						type: "post",
						url: wx_url + "v1/theworddaily/course_list",
						beforeSend: function(request) {
							request.setRequestHeader("Authorization", 'Bearer ' + token);
						},
						data: {
							"class_open_id": rank,
							"paginate": 5,
							"page": page
						},
						success: function(data) {

							$('.loading').hide();
							for(var item of data.data) {
								renderHtml += `<li>${item.from_time}</li>`
							}
							$('.load ul').append(renderHtml)
							//需注意每次赋值后将html变量清空
							renderHtml = '';
							//当我们的page数 》= 后台返回的总页数时，不载加载
							if(page >= data.last_page) {
								isEnd = true
								//将加载效果去掉
								setTimeout(function() {
									$('.loader-inner').hide();
									$('.more').show()
								}, 2000)
							}
						}
					})
				}
			}
			scroll();
			//封装滚动加载
			function scroll() {
				//滚动条到页面底部加载更多案例   
				$(window).scroll(function() {
					var scrollTop = $(this).scrollTop(); //滚动条距离顶部的高度  
					var scrollHeight = $(document).height(); //当前页面的总高度  
					var clientHeight = $(this).height(); //当前可视的页面高度  
					if(scrollTop + clientHeight >= scrollHeight) { //距离顶部+当前高度 >=文档总高度 即代表滑动到底部   
						//滚动条到达底部  
						//将页数加1
						page = page + 1;
						setTimeout(function() {
							getList(page)
						}, 1000)
					} else if(scrollTop <= 0) {
						//滚动条到达顶部  
						//滚动条距离顶部的高度小于等于0 TODO  
						$('.loader-inner').hide();
					}
				});
			}
		</script>

	</body>

</html>