无限加载（前端分页）

最新推荐文章于 2024-05-04 20:41:55 发布

原创最新推荐文章于 2024-05-04 20:41:55 发布 · 778 阅读

1 ·

CC 4.0 BY-SA版权

本文介绍了一种基于JavaScript的无限加载技术实现方法，并通过具体示例展示了如何使用Ajax进行数据请求并动态添加内容到页面中。该示例还包含了元素创建、样式设置及页面跳转等功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

function insertContent(num){

    var flag="flag="+num;//flag 是我给后台传的数据，不重要
    //无限加载
    var page=0;//当前页数
    var timer=setInterval(function() {
        var documentHeight = document.documentElement.offsetHeight;//文档高度
        var documentClient = document.documentElement.clientHeight;//浏览器高度
        var documentScrollTop = window.pageYOffset ||
            document.documentElement.scrollTop ||
            document.body.scrollTop || 0;//滚动条高
        if (documentHeight - documentClient - documentScrollTop < 80) {//当到达底部小于80时进入这个条件调用ajax

         $(".jiazai").css("display", "block");//一个提示的框框，不重要，
            $.ajax({
                url:"getRecommendBus",
                dataType:"json",
                type:"post",
                data:flag,
                success: function (json) {
                    var len = json.length;//数据长度
                    var bPage = Math.ceil(len / 2);//两个为一页。因为数据太少，可以随意更改，只要和后面的数据对上就好了
                    if ((page + 1) <= bPage) {//当当前页数+1小于总页数，则进入循环
                        //创建
                        for (var i = page * 2;i<len&& i < page * 2 + 2; i++) {
                            $("<div \id=\""+json[i].businessId+"\" class=\"shop clearfix\">\n" +
                                "            <div class=\"photo\">\n" +
                                "               < img src='" + json[i].businessPic + "'/>\n" +
                                "            </div>\n" +
                                "           <div class=\"shop_detail\">\n" +
                                "               <h3 class=\"shopname\">" + json[i].businessName + "</h3>\n" +
                                "               <div class=\"star\">\n" + "<div class='star1 clearfix'>" +
                                "                   <div class=\"star_side\">\n" +
                                "                       < img src=\"img/index/star2.png\"/>< img src=\"img/index/star2.png\"/>< img src=\"img/index/star2.png\"/>< img src=\"img/index/star2.png\"/>< img src=\"img/index/star2.png\"/>\n" +
                                "                   </div>" +
                                "</div>" + " <span>" + json[i].businessScore + "</span><strong>月售<span>" + json[i].businessSalenum + "</span>份</strong>\n" +
                    "                 </div>\n" +
                    "           <div class=\"price\">￥<span>" + json[i].startPrice + "</span>元起送</div>\n" +
                    "           </div>\n" +
                    "       </div>").appendTo(".business");

//五星好评的一个样式

                $(".star1").eq(i).css("width", ($(".star_side").eq(i).width() / 5 * (json[i].businessScore)) / parseFloat($("html").css("fontSize"))+0.06+ "rem");
            }
            page++;
            //点击进入商铺
            $(".business>div").click(function () {
                window.location.href = "shop.html?businessId="+$(this).attr("id");
            });
        } else {
            $(".jiazai").html("加载到底了...");
            clearInterval(timer);
        }
    }
});

});

eee，看不懂的话，可以去我的码云找。。。点击打开链接 https://gitee.com/Four_Cute/GreenTakeOut