现在开发项目很多时候依赖于插件，很少去手动实现一些实用的功能了，最近项目中用到了上拉加载（其实本心一直认为只要是列表性的东西就应该主动实现上拉加载，可是因为懒，很少弄，懒也是种病，得治
），项目中用了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>