在线直播系统源码，实现进入页面就去请求列表接口并触底分页加载
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://g.omtech.cn/jquery/v1.8.0/jquery.js"></script>
<style>
.list-wrap {
margin: 100px auto;
height: 400px;
overflow: scroll;
border-top: 1px solid #bfbfbf;
}
.list-wrap .list-item {
border-bottom: 1px dashed #bfbfbf;
}
.list-wrap .list-item:nth-last-child(1) {
border: none;
}
.list-wrap .list-item .item-name {
color: #6a6a6a;
font-size: .23rem;
margin: .2rem 0 0 .16rem;
font-weight: 550;
}
.list-wrap .list-item .item-desc {
color: #939393;
font-size: .22rem;
margin: .1rem 0 .16rem .7rem;
line-height: 2;
}
.list-wrap .list-item .item-desc:hover {
text-decoration: underline;
color: #ea404a;
}
</style>
</head>
<body>
<div class="list-wrap" id="listWrap">
<div class="list-item" id="listItem">
</div>
<div id="loadingData" style="display: none;text-align: center;margin: .2rem;;font-size: .25rem;">加载中...</div>
<div id="noData" style="display: none;text-align: center;line-height: 4rem;font-size: .25rem;">暂无留言~快去留言板留言吧！</div>
<div id="noMoreData" style="display: none;text-align: center;margin: .2rem;;font-size: .25rem;">暂无更多留言~</div>
</div>
<script>
var page = 1;
var pagesize = 15;
var finished = false;
var dataList = [];
if (finished && !dataList.length) {
finished = true;
} else {
finished = false;
}
$(document).ready(function () {
//加载留言列表
if ((page === 1 && dataList.length) || page > 1) {
page = page + 1;
}
commentLoad();
})
function commentLoad() {
if (finished) return;
document.getElementById("loadingData").style.display="block";
$.ajax({
type: 'post',
url: 'https://comment.rmt.omtech.cn/api/comment/lists',//测试环境
data: {
contentid: 'rmt_10535-269364-1',
app_id: '2',
page: page,
org_uuid: '87f305e4-b311-5b90-bc13-badb4093fdf7',//机构id
auth: "eyJ1c2VyaWQiOiJvT0V4Snd5b20yMzRKTE1fMHZkOE42SGhzLWpvIiwidXNlcm5hbWUiOiLkuIDkuIkiLCJ1c2VyYXZhdGFyIjoiaHR0cHM6Ly90aGlyZHd4LnFsb2dvLmNuL21tb3Blbi92aV8zMi9QaWFqeFNxQlJhRUtMbnFOZm5QaWJTb1N0UEs4bW9vMG1CSHNpYTNjOUZ0OHZMODVONTc2aWF6Tk5PU29mbkRZNkdsT2NxQ2lhTGNhTHpFa3JDcld0RVE5SWpnLzEzMiJ9"
},
dataType: 'json',
headers: {
'X-Key': '31cfBglUVlFWBAUGVQUFVQQGBQwCVAMFU1FbAw5+MXl2cH1ddycfEBBSRHQtREJ4anZ9',
'X-Signature': 'iVvHcVCdRsrCJjv6tXP8zLKa9ZCgUS33',
'X-Token': '2cc89f4627c6fe69ef48d2d723ef3ec542fbe8c0db532da446918f61e60a18910de82b2a0cc7b3fc76cbdd76ff7bdefd4008ef94c443a68a26fd985266464e4f'
},
success: function (res) {
console.log(res, "评论列表")
if (res.code == 0) {
if (page === 1) {
dataList = res.data.lists;
} else {
dataList = [...dataList, ...res.data.lists];
}
if (res.data.lists.length === 0) {
document.getElementById("noData").style.display = "block";
}
// 是否为最后一页数据
else if (res.data.lists.length < pagesize) {
finished = true;
document.getElementById("noMoreData").style.display = "block";
}
var messageStr = "";
dataList.forEach(e => {
messageStr += `<div class="list-item">
<div class="item-name">${
e.username}</div>
<div class="item-desc">
${
e.content}
</div>
</div>`
})
document.getElementById("listItem").innerHTML = messageStr;//将数据渲染到页面
document.getElementById("loadingData").style.display="none";
}else {
alert(res.message);
}
},
error: function (err) {
document.getElementById("loadingData").style.display="none";
console.error(err + '评论列表接口，请求失败！');
}
})
}
//滚动触底加载第二页的数据
document.getElementById("listWrap").onscroll = function () {
var scrollHeight = document.getElementById("listWrap").scrollHeight;
var scrollTop = Math.ceil(document.getElementById("listWrap").scrollTop);
var clientHeight = document.getElementById("listWrap").clientHeight;
if (scrollHeight - clientHeight <= scrollTop) {
//滚动条滚到最底部
console.log("滚到了最底部");
page++;
commentLoad();
}
};
</script>
</body>
</html>
以上就是在线直播系统源码，实现进入页面就去请求列表接口并触底分页加载， 更多内容欢迎关注之后的文章