关键词搜索

全站搜索
×
密码登录在这里
×
注册会员

已有账号? 请点击

忘记密码

已有账号? 请点击

使用其他方式登录

JQuery实现列表滚动到底部自动加载更多数据

发布2021-05-11 浏览1661次

详情内容

在用JQuery实现列表,在h5页面滚动到底部自动加载更多数据,无需手动点击,原因很简单,一个监听滚动方法,加上判断页面滚动高度加上窗口高度大于与页面长度就加载数据。

html+js

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    <meta name="format-detection" content="telephone=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta charset="UTF-8">
    <title>滚动加载</title>
    <script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
    <style>
        *{margin: 0;padding: 0}
        body{background: #f2f2f2}
        .box{width:96%;max-width: 500px;margin: 0 auto;padding: 2%;font-size:14px;}
        .box-list{padding:30px 0;text-align: center;border: 1px solid #57bfa0;border-radius: 6px;width: 100%;margin-bottom: 3%;background: #fff}
        .box-list i{margin: 0 5px;font-style: normal}
    </style>
</head>
<script type="text/javascript">

    $(function () {

        var data = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15]
        let num= 7;
        
        //页面初始时,只加载7条数据
        let str = getData(data,0,7);
        $(".box").html(str)  
        
        function getData(data,start,end) { 
            let str = "";
            let zdata = data.slice(start,end)
            for (let i = 0; i < zdata.length; i++) {
                str += "<div class=\"box-list\">第<i>"+ zdata[i]+"</i>条信息</div>"
            }
            return str;
        }
        
        //滚动监听
        $(window).scroll(function () {
            var scrollTop = $(this).scrollTop();
            var scrollHeight = $(document).height();
            var windowHeight = $(this).height();
           
            if (scrollTop + windowHeight + 10 >= scrollHeight) {
                //这部分写逻辑代码
                //滚动条下拉时,再追加下面的dom数据
                if(num <= data.length){
                    let sum = getData(data,num,num+7);
                    num = num+7;
                    $(".box").append(sum)
                }
            }
        });
    });

  
</script>
<body>
    <div>

    </div>
</body>
</html>

效果如下,

image.png

image.png

点击QQ咨询
开通会员
上传资源赚钱
返回顶部
×
  • 微信支付
  • 支付宝付款
扫码支付
微信扫码支付
请使用微信描二维码支付
×

提示信息

×

选择支付方式

  • 微信支付
  • 支付宝付款
确定支付下载