美文网首页
jQuery 下拉加载

jQuery 下拉加载

作者: 前端陈陈陈 | 来源:发表于2020-11-07 10:14 被阅读0次
        $("#box").scroll(function (event) {  // box  是你要下拉的区域id ,  也可以直接使用$(window).scroll
    
    
            var h = $(this).height(); //div可视区域的高度
            var sh = $(this)[0].scrollHeight; //滚动的高度,$(this)指代jQuery对象,而$(this)[0]指代的是dom节点
            var st = $(this)[0].scrollTop; //滚动条的高度,即滚动条的当前位置到div顶部的距离
            if (h + st >= sh - 3) {
                page++    // 事件请求page 
                getMore(page)   // 请求事件
            }  
        });
    
    
    
        var listArr = []
    
        function getMore(page, ) { //请求事件
            $.ajax({
                url: "{php echo mobileUrl('groups')}" + "&page=" + page,
                data: {
                    page: page
                },
                type: 'post',
                cache: false,
                dataType: 'json',
                success: function (data) {
                    if (data.status == 1) {
                        listArr = listArr.concat(data.result.list)
                        console.log("listarr", listArr)
                        var str = '';
                        for (var i = 0; i < listArr.length; i++) {
                            // 渲染内容
                        }
                        $("#content").append();
                    }
                },
                error: function () {
                    alert("异常!");
                }
            });
        }
    

    相关文章

      网友评论

          本文标题:jQuery 下拉加载

          本文链接:https://www.haomeiwen.com/subject/jxefbktx.html