zoukankan      html  css  js  c++  java
  • 滚动加载数据

    滚动加载数据的基本原理:

    当滚动高度与可见高度大于或等于内容高度时,加载下一页的数据。

    如下的例子,class名为result_con的div出现滚动条:

    
    
     var currentPage = 1;//当前页
     var maxPage = 10;//总共页数

    //
    滚动加载数据 $(".result_con").on("scroll",function () { var viewH = $(this).height();// 可见高度 var contentH = $(this).get(0).scrollHeight;// 内容高度 var scrollTop = $(this).scrollTop();// 滚动高度 // console.info(viewH); // console.info(contentH); // console.info(scrollTop); if (viewH + scrollTop >= contentH && currentPage < maxPage) { currentPage++; //执行加载数据的函数 } })

    如果是document出现滚动条,则

    //滚动加载数据
    $(document).on("scroll",function () {
        var viewH = $(window).height();// 可见高度
        var contentH = document.body.scrollHeight;// 内容高度
        var scrollTop = $(this).scrollTop();// 滚动高度
        //console.info(viewH);
        //console.info(contentH);
        //console.info(scrollTop);
        if (viewH + scrollTop  >= contentH && currentPage < maxPage) {
            currentPage++;
            //执行加载数据的函数
            
        }
    })
  • 相关阅读:
    Vue项目中使用Vue-Quill-Editor富文本编辑器插件
    Element-UI中的Cascader 级联选择器高度以及位置问题
    Sublime中同一个文件进行分屏显示
    Oracle的clob数据类型
    查看Nginx版本号的几种方式
    华为路由器EasyNAT&NAT Server
    huawei路由器NAT配置
    15
    14
    13
  • 原文地址:https://www.cnblogs.com/lw5116/p/5845254.html
Copyright © 2011-2022 走看看