<!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>
//<link rel="stylesheet" href="css/bootstrap.min.css">
//<link rel="stylesheet" href="sui-mobile/dist/css/sm.min.css">
//<link rel="stylesheet" href="sui-mobile/dist/css/sm-extend.min.css">
<script src="sui-mobile/_site/assets/js/jquery.min.js"></script>
</head>
<body style="background-color: #fff;margin: 0; overflow: auto;">
<header class="bar bar-nav">
<h1 class="title">底部无限滚动</h1>
</header>
<table id="xztb" class="table" style="margin-top: 100px;">
<tr style="background-color: #f1f1f1;border-bottom: 1px solid #f1f1f1;">
<th style="white-space: nowrap">品名</th>
<th style="white-space: nowrap">库存</th>
</tr>
<tbody id="showtable" >
<!-- <tr><td><div class="no">暂无数据</div></td></tr> -->
</tbody>
</table>
<div class="infinite-scroll-preloader">
<div class="preloader"></div>
</div>
</body>
//<script src='sui-mobile/dist/js/sm.js'></script>
<script type="text/javascript">
$(".infinite-scroll-preloader").hide()
// 最多加载的条数
var maxItems = 100;
// 每次加载添加多少条目
var itemsPerLoad = 20;
function add(number,lastIndex){
console.log(number)
console.log(lastIndex)
var html = '';
for (var i = lastIndex + 1; i <= lastIndex + number; i++) {
html += '<tr class="len"><td >'+i+'</td></tr>';
}
// 添加新条目
$('#showtable').append(html);
}
add(itemsPerLoad,0)
// 上次加载的序号
var lastIndex = 20;
window.onscroll = function() {
//变量scrollTop是滚动条滚动时,距离顶部的距离
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
//变量windowHeight是可视区的高度
var windowHeight = document.documentElement.clientHeight || document.body.clientHeight;
//变量scrollHeight是滚动条的总高度
var scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;
//滚动条到底部的条件
if (scrollHeight - (scrollTop + windowHeight) < 1) {
if (lastIndex >= maxItems) {
console.log("没数了")
return false;
}
//写后台加载数据的函数
// console.log("距顶部" + scrollTop + "可视区高度" + windowHeight + "滚动条总高度" + scrollHeight);
$(".infinite-scroll-preloader").show()
console.log("出现转圈")
add(itemsPerLoad,lastIndex)
lastIndex = $('.len').length;
$(".infinite-scroll-preloader").hide()
console.log("关闭转圈")
}
}
</script>
<style type="text/css">
.infinite-scroll-preloader {
margin-top:-20px;
}
</style>
</html>
https://sui.thinkadmin.top/
我用的这个组件库 需要可以去看看