jquery（js）实现上滑加载更多内容（分页查询）

原创

Serena_tz 2022-11-07 17:50:49 博主文章分类：jQuery ©著作权

文章标签 javascript js jquery 加载 html 文章分类 运维

©著作权归作者所有：来自51CTO博客作者Serena_tz的原创作品，请联系作者获取转载授权，否则将追究法律责任

移动端上滑加载更多步骤

移动端实现滚动上滑加载更多内容分为以下几步：

步骤1 禁用系统滚动条

使用CSS样式禁用移动端的滚动条，代码如下所示：

html,body{
width:100%;
overflow:hidden;
}

步骤2 主体内容区域充满视口

需要添加滚动事件的元素必须拥有固定高度，并设置该元素y轴可以滚动，主体内容在该具有固定高度的元素中滚动。具体样式代码如下：

overflow-x: hidden;
overflow-y: scroll;

如果该元素的高度需要撑满整个视口，则可以将高度设为100%，继承html、body的高度。

height: 100%;

移动端上滑加载更多实例

移动端实例css代码，注意禁用系统滚动条，添加滚动事件元素设置高度，开启滚动，html代码、js代码如下
html代码：

<!-- 全部 -->
   <div class="pal1" id="box">
     <div class="cardbox" id="conlist">
       <div class="card bgwhite shadow pore">
         <div class="more">
           <span class="iconfont icon-xiala1"></span>
           <span class="iconfont icon-shangla none"></span>
         </div>
         <ul>
           <li>1</li>
           <li>2</li>
           <li>3</li>
           <li>4</li>
           <li>5</li>
           <li>6</li>
           <li>7</li>
           <li>8</li>
           <li>9</li>
           <li>10</li>
          </ul>
       </div>
     </div>
     <div class="bomtips">
       <div class="imgbox tc gray none" id="load">
       <img src="../image/loading.gif" alt="">加载中…
     </div>
     <div class="gray tc none" id="ok">没有更多了…</div>
     </div>
   </div>

js代码：

// 滚动下滑展示更多
    function scrollmore(box,conlist,load,ok){
        var page = 1; // 页码
        var flag = true; // flag 用于防止滚动中（内容还未加载完毕）加载多次

        var scrollHeight = $(box)[0].scrollHeight; // 整个内容高度
        var clientHeight = $(this).height(); // 可视区域高度
        // 数据没有更多的时候显示没有更多了
        if(scrollHeight<=clientHeight){
            $(ok).show();
        }
        // jquery实现
        $(box).scroll(function(){
            var scrollTop = $(this).scrollTop(); // 滚动条距离顶部的高度
            var scrollHeight =$(this)[0].scrollHeight; // 整个内容高度
            var clientHeight = $(this).height(); // 可视区域高度
            // console.log(scrollTop,scrollHeight,clientHeight)
            // 滚到底部了
            if (scrollTop + clientHeight >= scrollHeight) {
                // $(ok).hide();
                $(load).show();
                // 判断结束
                // 当前页面显示的数据条数>=总共的数据条数
                // 此时，显示没有更多了
                // 当前页面显示条数：$('.cardbox')[0].children.length
                if(page==3){
                    $(load).hide();
                    $(ok).show();
                    return
                }
                if (flag) {
                    // 触发后
                    flag = false
                    // 模拟ajax请求
                    var timer=setTimeout(function () {
                        page++;
                        loadMore(page)
                    }, 1000)
                }
            }
        })
        // 加载更多
        function loadMore(page) {
            var dom = '';
            for (var i = 0; i < 20; i++) {
                dom += `
                <section>后面加载${page}的${i}</section>
                `
            }
            $(conlist).append($(dom))
            $(load).hide();
            // dom渲染完毕后重新开启flag
            flag = true;
        }
    }
    scrollmore('#box','#conlist','#load','#ok')

模仿 ajax请求数据

（待尝试）

<script type="text/javascript">
function bottomScrollLoading(contentObj, loadingObj, url) {
  var loading = false;
  
  $(window).scroll(function (){
    if (loading)
    {
      return; // 已经在加载中了，再拖也没有用
    }
    
    var scrollTop = $(window).scrollTop();
    var clientHeight = $(window).height();
    // var clientHeight = document.body.clientHeight; // 如果没有为网页指定 DOCTYPE，则用这句代替上一句
    if (scrollTop + clientHeight < $(document).height()){
      return; // 还没有拖到底
    }
    
    loading = true;
    $(loadingObj).show(); // 显示“加载中”
    $(window).scrollTop(scrollTop + $(loadingObj).height()); // 继续滚动，让“加载中”显示完整
    // ajax 读取
    $.ajax({
      url: url,
      success: function (data){
        // setTimeout(function (){
          $(contentObj).append(data);
        // }, 5000); // 为了效果明显，作了延迟，调试用。
      },
      complete : function (){
        // setTimeout(function (){
          $(loadingObj).hide();
          $(window).scrollTop(scrollTop); // 由于前面为了显示“加载中”让网页下滚了，这里要复原，否则如果遇到加载的内容高度 < “加载中”高度，就会导致又触发滚动加载。
          loading = false;
        // }, 5000); // 为了效果明显，作了延迟，调试用。
      }
    });
  });
}


$(window).ready(function (){
  bottomScrollLoading("#list", "#bottomLoading", "data.htm");
});
</script>

PC端上滑加载更多实例

html文件：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>scroll的局部实现</title>
    <style>
        * {
            margin: 0px;
            padding: 0px;
        }

        #box {
            width: 500px;
            height: 400px;
            border: 1px solid #666;
            margin: 100px auto;
            overflow-x: hidden;
            overflow-y: scroll;
            position: relative;
        }

        section {
            height: 40px;
            line-height: 40px;
            text-align: center;

        }

        #load {
            display: none;
        }
    </style>
</head>

<body>
    <div id="box">
        <div class="conlist" id="conlist">
            <section>1</section>
            <section>2</section>
            <section>3</section>
            <section>4</section>
            <section>5</section>
            <section>6</section>
            <section>7</section>
            <section>8</section>
            <section>9</section>
            <section>10</section>
            <section>11</section>
            <section>12</section>
            <section>13</section>
            <section>14</section>
            <section>15</section>
            <section>16</section>
            <section>17</section>
            <section>18</section>
            <section>19</section>
            <section>20</section>
        </div>
        <img src="./loading.gif" alt="" id="load">
    </div>

</body>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
<script>
    var page = 1; // 页码
    var flag = true; // flag 用于防止滚动中（内容还未加载完毕）加载多次
    // jquery实现
    $('#box').scroll(function(){
        var scrollTop = $(this).scrollTop(); // 滚动条距离顶部的高度
        var scrollHeight =$(this)[0].scrollHeight; // 整个内容高度
        var clientHeight = $(this).height(); // 可视区域高度
        console.log(scrollTop,scrollHeight,clientHeight)
        if (scrollTop + clientHeight >= scrollHeight) {
            console.log(scrollHeight)
            $('#load').show();
            if (flag) {
                // 触发后
                flag = false
                // 模拟ajax请求
                setTimeout(function () {
                    page++;
                    loadMore(page)
                }, 2000)
            }
        }
    })

    // 元素实现
    // document.getElementById('box').onscroll = function () {
    //     // 获取三个参数
    //     var sTop = document.getElementById('box').scrollTop;
    //     var sHeight = document.getElementById('box').scrollHeight;
    //     var clientHeig = document.getElementById('box').clientHeight;
    //     if (sTop + clientHeig >= sHeight) {
    //         console.log(sHeight)
    //         $('#load').show();
    //         if (flag) {
    //             flag = false
    //             setTimeout(function () {
    //                 page++;
    //                 loadMore(page)
    //             }, 2000)
    //         }
    //     }
    // }


    // 加载更多
    function loadMore(page) {
        var dom = '';
        for (var i = 0; i < 20; i++) {
            dom += `
            <section>后面加载${page}的${i}</section>
            `
        }
        $('#conlist').append($(dom))
        $('#load').hide();
        // dom渲染完毕后重新开启flag
        flag = true;
    }
</script>

</html>