zoukankan      html  css  js  c++  java
  • js_原生js实现上拉加载更多的功能。

    1.人生啊,是我莽撞了啊。这是我公司一个喜欢读书的女孩子的个性签名,喜欢哪些句子,不悲伤,却切切实实的令人喜好。

    2.写程序是一件很直接明了的事情,明白了就是明白了,不懂就是不懂,不懂装懂的会让你走很多弯路,对于我们在度娘上找到的一些方法,我们把它用到项目中的时候,也要把它弄懂,

    只有自己弄懂了,才会实打实的沉淀下来,变成属于自己的东西。一个人对于一个问题的态度,终将把你变成那样的人。愿你对一个问题有一种把它切底弄懂的情怀。时间那么浅,别太把它

    用来打王者农药了,那段位的荣耀在生活中,终是不能成就你。

    3.最近在健身,花钱不少,相信是值得的。

    此处以下,是关于技术。

     
     1                 //--------------上拉加载更多---------------
     2         //获取滚动条当前的位置 
     3         function getScrollTop() {
     4             var scrollTop = 0;
     5             if(document.documentElement && document.documentElement.scrollTop) {
     6                 scrollTop = document.documentElement.scrollTop;
     7             } else if(document.body) {
     8                 scrollTop = document.body.scrollTop;
     9             }
    10             return scrollTop;
    11         }
    12 
    13         //获取当前可视范围的高度 
    14         function getClientHeight() {
    15             var clientHeight = 0;
    16             if(document.body.clientHeight && document.documentElement.clientHeight) {
    17                 clientHeight = Math.min(document.body.clientHeight, document.documentElement.clientHeight);
    18             } else {
    19                 clientHeight = Math.max(document.body.clientHeight, document.documentElement.clientHeight);
    20             }
    21             return clientHeight;
    22         }
    23 
    24         //获取文档完整的高度 
    25         function getScrollHeight() {
    26             return Math.max(document.body.scrollHeight, document.documentElement.scrollHeight);
    27         }
    28         
    29         //滚动事件触发
    30         window.onscroll = function() {
    31             if(getScrollTop() + getClientHeight() == getScrollHeight()) {
    32                34             }
    35         }
    36         //-----------------结束--------------------                

    原理很简单,代码31行做了一个判断getScrollTop() + getClientHeight() == getScrollHeight(),第一个函数获取滚动条的位置,第二个函数获取当前屏幕可见的高度,第三个函数获取当前文档的总高度,

    当前两个参数等等第三个参数的时候,就表示文档已经拉到底部了,触发事件向后台请求数据。这样一个分页功能就写出来了。

    这里多提一点,向后台请求数据的时候,需要向后台发送一个参数,第一页就是1,第二页就是2,如此用来区分,我们在后台拿到的数据是相对应的。

    “世界是个叙述者, 而我们却蒙上黑布, 嗤之以鼻。”
  • 相关阅读:
    javascript入门篇(五)
    javascript入门篇(四)
    javascript入门篇(三)
    原生js查询、添加、删除类
    关于禁止复制网页内容应该做的兼容
    json快速入门
    jquery快速入门(五)
    jquery快速入门(四)
    jquery快速入门(三)
    Triangle 1.6 (A Two-Dimensional Quality Mesh Generator and Delaunay Triangulator)
  • 原文地址:https://www.cnblogs.com/wush-1215/p/7654709.html
Copyright © 2011-2022 走看看