2018-11-27  92 views 评论

【ASP.NET + JS/JQuery Ajax】实现下拉触底自动异步加载数据 无刷新

之前给客户做的一个二手房/地产咨询网站,房源列表页之前的实现方式是下拉到底部,单击加载更多后加载更多数据(房源信息)

客户来电要求更改为下拉到底部 只要有数据就自动加载新数据,即有数据则无限制加载,无需翻页。

效果如下:

实现Demo代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>测试</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
</head>
<body>
    <div style="height:2000px; border:1px solid #ccc;">
  这里是内容
    </div>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
    <script>
        //文档高度
  function getDocumentTop() {
      var scrollTop = 0, bodyScrollTop = 0, documentScrollTop = 0;
      if (document.body) {
          bodyScrollTop = document.body.scrollTop;
      }
      if (document.documentElement) {
          documentScrollTop = document.documentElement.scrollTop;
      }
      scrollTop = (bodyScrollTop - documentScrollTop > 0) ? bodyScrollTop : documentScrollTop;    return scrollTop;
  }

  //可视窗口高度
  function getWindowHeight() {
      var windowHeight = 0;
      if (document.compatMode == "CSS1Compat") {
          windowHeight = document.documentElement.clientHeight;
      } else {
          windowHeight = document.body.clientHeight;
      }
      return windowHeight;
  }

  //滚动条滚动高度
  function getScrollHeight() {
      var scrollHeight = 0, bodyScrollHeight = 0, documentScrollHeight = 0;
      if (document.body) {
          bodyScrollHeight = document.body.scrollHeight;
      }
      if (document.documentElement) {
          documentScrollHeight = document.documentElement.scrollHeight;
      }
      scrollHeight = (bodyScrollHeight - documentScrollHeight > 0) ? bodyScrollHeight : documentScrollHeight;    return scrollHeight;
  }
  window.onscroll = function () {
      //监听事件内容
      if(getScrollHeight() == getWindowHeight() + getDocumentTop()){
          //当滚动条到底时,这里是触发内容
          //异步请求数据,局部刷新dom
          $('body').append('<div style="height: 200px;"></div>');
                //此处加载Html
      }
  }
    </script>
</body>
</html>

 

 

给我留言

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: