zoukankan      html  css  js  c++  java
  • h5页面下拉到底部加载下一页数据

    //页面滚到底部异步加载下一页数据
        $(window).scroll(function () {
            //已经滚动到上面的页面高度
            var scrollTop = parseFloat($(this).scrollTop()),
            //页面高度
                scrollHeight = $(document).height(),
            //浏览器窗口高度
                windowHeight = parseFloat($(this).height()),
                totalHeight = scrollTop + windowHeight;
    
            //此处是滚动条到底部时候触发的事件,在这里写要加载的数据,或者是拉动滚动条的操作
            if (scrollTop + windowHeight >= scrollHeight - 0.7) {
                //一级分类
                var first = $("#h_first").val(),
                    //二级分类
                    second = $("#h_second").val(),
                    //分页数
                    num = parseInt($("#pageNum").val()),
                    num = num + 1;
                $("#pageNum").attr('value', num);
                $.ajax({
                    type: 'post',
                    url: '/MicroPortal/ContentListForNotice?f=' + first + '&s=' + second + '&t=&PageIndex=' + num,
                    beforeSend: function (XMLHttpRequest) {
                        $("#loadMore").removeClass('hidden').text('正在加载数据...');
                    },
                    success: function (data) {
                        if (data.length == 0) {
                            $("#loadMore").removeClass('hidden').text('已加载全部数据!');
                        }
                        var data = getTime(data);
                        for (var i = 0, length = data.length; i < length; i++) {
                            $("#infoList").append("<li><a href='public_content.html?id=" + data[i].Id + "&f=" + first + "&s=" + second + "'><span>" + data[i].Title + "</span><span class='time'>" + data[i].PublishTime + "</span></a></li>");
                        }
                    },
                    error: function (XMLHttpRequest, textStatus, errorThrown) {
                        $("#loadMore").removeClass('hidden').text('数据加载失败,请重试!');
                    }
                });
            }
        });
  • 相关阅读:
    tensorflow2.0——简单的三种图像增强方式(翻转,光照,对比度)
    tensorflow2.0——卷积初始化
    tensorflow2.0——实现先卷积后LSTM的网络
    tensorflow2.0——compile-fit实现多输入复合模型
    CMDB-客户端
    saltstack部署
    CMDB实现的四种方式
    理解python中的元类
    RESTful 架构
    Vuex笔记/axios笔记
  • 原文地址:https://www.cnblogs.com/donglf/p/6638501.html
Copyright © 2011-2022 走看看