JS 下拉刷新页面


function getList() {
    var page = 1;
    var innerHeight = window.innerHeight;
    var timer2 = null;
    $.ajax({
        url: 'url',
        type: 'GET',
        dataType: 'json',
        timeout: '1000',
        cache: 'false',
        data: {
            "page": page
        },
        success: function (data) {
            $("#list").empty();
            if (data.pageData.length > 0) {
                $.each(data.pageData, function (i, item) {
                    var div = "<div class=\"am-g list_time\">"+ item.name +"</div>";
                    $("#list").append(div);
                });
            }else{
                $("#list").append('<div style="text-align: center;"><p>无数据</p> </div>');
            };
            var ajax_getting = false;
            $(window).scroll(function () {
                clearTimeout(timer2);
                timer2 = setTimeout(function () {
                    var scrollTop = $(document.body).scrollTop();
                    var scrollHeight = $('body').height();
                    var windowHeight = innerHeight;
                    var scrollWhole = Math.max(scrollHeight - scrollTop - windowHeight);
                    if (scrollWhole < 100) {
                        if (ajax_getting) {
                            return false;
                        } else {
                            ajax_getting = true;
                        }
                        $("#list").append('<div id="load" style="text-align: center;"><img src="static/images/load.gif" width="10%"/></div>');
                        $('html,body').scrollTop($(window).height() + $(document).height());
                        page++;
                        $.ajax({
                            url: 'url',
                            type: 'GET',
                            dataType: 'json',
                            data: {
                                "page": page
                            },
                            success: function (data) {
                                $("#load").remove();
                                if (data.pageData.length > 0) {
                                    $.each(data.pageData, function (i, item) {
                                        var div = "<div class=\"am-g list_time\">"+ item.name +"</div>";
                                        $("#list").append(div);
                                    });
                                } else {
                                    $("#load").remove();
                                    $("#list").append('<div id="load" class="am-u-sm-12" style="text-align: center;">没有更多数据。</div>');
                                    $(window).unbind('scroll');
                                };
                                ajax_getting = false;
                            }
                        });
                    };
                    $(".load").remove();
                }, 200);
            });
        }
    });
    $(window).bind("orientationchange", function () {
        $('.sliders').css('left', $(window).width() / 2 + 'px');
    });
}


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值