我的知识记录分享
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<style>
#conList { height: 500px; overflow: auto; }
.con-item { padding: 10px; margin: 10px 0; line-height: 1.5; background: skyblue; }
.isLoading { position: fixed; left: 0; top: 0; width: 100%; height: 100%; text-align: center; background-color: rgba(0, 0, 0, .5); z-index: 1000; }
.isLoading-text { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); color: #fff; }
.con-finished { margin: 20px 0; display: none; text-align: center; }
</style>
</head>
<body>
<!-- 内容 -->
<div id="conList">
<div class="con-items"></div>
<div class="con-finished">没有更多数据了~</div>
</div>
<!-- 加载中 -->
<div class="isLoading"><span class="isLoading-text">加载中...</span></div>
<script>
(function($) {
$.fn.soLoadPage = function(opt) {
var dft = {
conClass: '.con-items', //内容的盒子类，用来计算内容总高度用
itemClass: '.con-item', //内容项的类名
conFinishedClass: '.con-finished', //没有更多数据的类名
prePageTop: 100, //往上加载上一页时，如果还未到第一页，保持距离顶部的距离以保证可继续往上滚动
spaceTop: 0, //距离盒子顶部多少时开始加载上一页数据
curPage: 1, //当前页码，默认从1开始
limit: 10, //每页请求个数
isLastPage: false, //是否已经是最后一页
arrow: 'down', //默认写入ui的方向，down表示往尾部写入，up表示往顶部写入
deletedPage: 0, //要被删除的页码数据
pageArea: 3, //界面上可见到的页码区间数，比如总页数有100页，但是界面上永远最多只展示pageArea页的数据
curPageData: [], //请求到某一页的数据
clearT01: '',
mockTotalPage: 10, //用来模拟的总页码数
};
$.extend(dft, opt);
$that = $(this);
$that.on('scroll', function() {
clearTimeout(dft.clearT01)
dft.clearT01 = setTimeout(function() {
var boxScrollTop = $that.scrollTop();
var boxHeight = $that.height();
var conHeight = $(dft.conClass).height();
// console.log(boxScrollTop, boxHeight, conHeight, (boxScrollTop + boxHeight) - conHeight)
if(boxScrollTop <= dft.spaceTop) { //距离盒子顶部小于等于dft.spaceTop时开始加载上一页数据
console.log('到顶了^^^^^^^')
if(dft.arrow == 'up') { //如果上一次的加载是发生在顶部
if(dft.curPage > 1) {
dft.curPage--;
dft.arrow = 'up';
dft.deletedPage = dft.curPage + dft.pageArea;
requestData(dft.curPage);
}
}else { //上一次的加载是发生在底部
if(dft.curPage - dft.pageArea > 0) {
dft.curPage -= dft.pageArea;
dft.arrow = 'up';
dft.deletedPage = dft.curPage + dft.pageArea;
requestData(dft.curPage);
}
}
}else if((boxScrollTop + boxHeight) - conHeight >= 0) { //滚动到底部，则加载下一页数据
console.log('到底了。。。')
if(!dft.isLastPage) { //不是最后一页，则继续加载下一页数据
if(dft.arrow == 'up') { //如果上一次的加载是发生在顶部
dft.curPage += dft.pageArea;
}else { //上一次的加载是发生在底部
dft.curPage++;
}
dft.arrow = 'down';
console.log(dft.curPage, 'dft.curPage')
dft.deletedPage = dft.curPage - dft.pageArea;
requestData(dft.curPage);
}
}
}, 300)
})
/**
*显示加载中
*/
function showLoading() {
$('.isLoading').show();
}
/**
*隐藏加载中
*/
function hideLoading() {
$('.isLoading').hide();
}
/**
*请求数据的方法
*[page] 页码
*/
function requestData(page) {
if(dft.curPage > dft.mockTotalPage) { //最后一页数据
dft.curPage--;
dft.isLastPage = true;
$(dft.conFinishedClass).show();
return false;
}else {
dft.isLastPage = false;
$(dft.conFinishedClass).hide();
}
// 模拟请求，拿到数据
showLoading();
setTimeout(function() {
dft.curPageData = [];
for(var i = 0; i < dft.limit; i++) {
dft.curPageData.push({
value: Math.random()
});
}
// 拿到数据后，开始写入数据
insertData(dft.curPageData);
}, 500)
};
/**
*将数据写入
*[arr] Array 某一页的数据
*/
function insertData(arr) {
var html = '';
for(var i = 0, len = arr.length; i < len; i++) {
var item = arr[i];
html += '<div class="con-item item-page-' + dft.curPage + '">' + item.value + '</div>';
}
if(dft.arrow == 'up') {
$(dft.conClass).prepend(html)
$that.scrollTop(dft.prePageTop);
}else {
$(dft.conClass).append(html);
}
$('.item-page-' + dft.deletedPage).remove();
hideLoading(); //在此调用关闭loading，可以避免快速滑到底多次触发导致多加载一页的bug
}
// 默认请求第一页数据
requestData(1);
}
})(jQuery);
// 调用
$('#conList').soLoadPage()
</script>
</body>
</html>
发表评论：