zoukankan      html  css  js  c++  java
  • 手机端下拉刷新

    //获取滚动条位置

    function getScrollTop() {
    var scrollTop = 0;
    if(document.documentElement && document.documentElement.scrollTop) {
    scrollTop = document.documentElement.scrollTop;
    } else if(document.body) {
    scrollTop = document.body.scrollTop;
    }

    //获取当前可视范围的高度

    function getClientHeight() {
    var clientHeight = 0;
    if(document.body.clientHeight && document.documentElement.clientHeight) {
    clientHeight = Math.min(document.body.clientHeight, document.documentElement.clientHeight);
    } else {
    clientHeight = Math.max(document.body.clientHeight, document.documentElement.clientHeight);
    }
    return clientHeight;
    }

    //获取文档完整的高度 

    function getScrollHeight() {
    return Math.max(document.body.scrollHeight, document.documentElement.scrollHeight);
    }

    //滚动事件触发

    window.onscroll = function() {
      if(getScrollTop() + getClientHeight() == getScrollHeight()) {
      //执行事件
      }
    }

    原理:

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

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

  • 相关阅读:
    约瑟夫
    用过的ps操作
    guns框架试用笔记
    让使用WebForm的.aspx文件写的WebApi能够跨域访问
    DevExpress的GridView的行变和列变
    SSMS18.0缺少调试功能
    EF_CodeFirst框架版本问题
    微信小程序框架了解2---js的写法
    微信小程序框架了解1---总体了解
    Chrome浏览器写代码片段的地方
  • 原文地址:https://www.cnblogs.com/liubu/p/9012767.html
Copyright © 2011-2022 走看看