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

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