2025年在线直播系统源码，实现进入页面就去请求列表接口并触底分页加载

大家好，我是讯享网，很高兴认识大家。

在线直播系统源码，实现进入页面就去请求列表接口并触底分页加载

<!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: #; 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--1', app_id: '2', page: page, org_uuid: '87f305e4-b311-5b90-bc13-badb4093fdf7',//机构id auth: "eyJ1c2VyaWQiOiJvT0V4Snd5b20yMzRKTE1fMHZkOE42SGhzLWpvIiwidXNlcm5hbWUiOiLkuIDkuIkiLCJ1c2VyYXZhdGFyIjoiaHR0cHM6Ly90aGlyZHd4LnFsb2dvLmNuL21tb3Blbi92aV8zMi9QaWFqeFNxQlJhRUtMbnFOZm5QaWJTb1N0UEs4bW9vMG1CSHNpYTNjOUZ0OHZMODVONTc2aWF6Tk5PU29mbkRZNkdsT2NxQ2lhTGNhTHpFa3JDcld0RVE5SWpnLzEzMiJ9" }, dataType: 'json', headers: { 
    'X-Key': '31cfBglUVlFWBAUGVQUFVGBQwCVAMFU1FbAw5+MXl2cH1ddycfEBBSRHQtREJ4anZ9', 'X-Signature': 'iVvHcVCdRsrCJjv6tXP8zLKa9ZCgUS33', 'X-Token': '2cc89f4627c6fe69ef48d2d723ef3ec542fbe8c0db532daf61e60a18910de82b2a0cc7b3fc76cbdd76ff7bdefd4008ef94c443a68a26fde4f' }, 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>

讯享网

以上就是在线直播系统源码，实现进入页面就去请求列表接口并触底分页加载，更多内容欢迎关注之后的文章

2025年在线直播系统源码，实现进入页面就去请求列表接口并触底分页加载

相关推荐