UDN-企业互联网技术人气社区

板块导航

浏览  : 556
回复  : 4

[原生js] 使用jQuery或者原生js实现鼠标滚动加载页面新数据

[复制链接]
饼干妹妹的头像 楼主
发表于 2017-1-10 14:19:50 | 显示全部楼层 |阅读模式
  这篇文章主要介绍了使用jQuery或者原生js实现鼠标滚动加载页面新数据的方法,即控制滚动条下拉时的加载事件,需要的朋友可以参考下

  相信很多人都见过瀑布流图片布局,那些图片是动态加载出来的,效果很好,对服务器的压力相对来说也小了很多,用鼠标操作的时候相信都见过这样的效果:进入qq空间,向下拉动空间,到底部时,会动态加载剩余的说说或者是日志 ,今天我们就来看看他们的实现思路和js控制动态加载的代码。
  
  下面的代码主要是控制滚动条下拉时的加载事件的,无论是加载图片还是加载记录数据  都可以。
  
  加载jQuery库后我们可以这样使用:
  1. $(window).scroll(function () {
  2.     var scrollTop = $(this).scrollTop();
  3.     var scrollHeight = $(document).height();
  4.     var windowHeight = $(this).height();
  5.     if (scrollTop + windowHeight == scrollHeight) {

  6.    //此处是滚动条到底部时候触发的事件,在这里写要加载的数据,或者是拉动滚动条的操作

  7. //var page = Number($("#redgiftNextPage").attr('currentpage')) + 1;
  8. //redgiftList(page);
  9. //$("#redgiftNextPage").attr('currentpage', page + 1);

  10.     }
  11.   });
复制代码

  解析:
  
  判断滚动条到底部,需要用到DOM的三个属性值,即scrollTop、clientHeight、scrollHeight。
  
  1.scrollTop为滚动条在Y轴上的滚动距离。
  
  2.clientHeight为内容可视区域的高度。
  
  3.scrollHeight为内容可视区域的高度加上溢出(滚动)的距离。
  
  从这个三个属性的介绍就可以看出来,滚动条到底部的条件即为scrollTop + clientHeight == scrollHeight。
  
  纯js我们可以这样做:
  1. window.onscroll = function() {
  2.    var scrollTop = document.body.scrollTop;
  3.    var offsetHeight = document.body.offsetHeight;
  4.    var scrollHeight = document.body.scrollHeight;
  5.    if (scrollTop == scrollHeight - offsetHeight) {
  6.     page++;
  7.     loadList(page);
  8.    }
  9.   };


  10. function loadList(page) {
  11.    page = page || 1;

  12.    if (isLoad) {
  13.     getJSON('/forum.php?mod=hot&page=' + page).then(function(data) {
  14.      if (data.code == 200) {
  15.       data = data.data;
  16.       if (data && Object.keys(data).length > 0) {
  17.        for (var k in data) {
  18.         var v = data[k];
  19.         detailTemplate = detailTemplate.cloneNode(true);
  20.         var userInfoObj = detailTemplate.getElementsByClassName('user-info')[0];
  21.         userInfoObj.getElementsByClassName('name')[0].innerText = v.author;
  22.         userInfoObj.getElementsByClassName('avatar')[0].src = v.avatar;
  23.         userInfoObj.getElementsByClassName('post-time')[0].innerHTML = v.lastpost;
  24.         detailTemplate.getElementsByClassName('title')[0].innerText = v.subject;
  25.         detailTemplate.getElementsByClassName('desc')[0].innerText = v.subject;
  26.         var extInfoObj = detailTemplate.getElementsByClassName('ext-info')[0];
  27.         extInfoObj.getElementsByClassName('from')[0].innerText = v.fname;
  28.         extInfoObj.getElementsByClassName('view-time')[0].innerText = v.views;
  29.         postListObj.appendChild(detailTemplate);
  30.        }
  31.       } else {
  32.        isLoad = false;
  33.       }
  34.      } else {
  35.       isLoad = false;
  36.      }
  37.     }, function(status) {
  38.      console.log('Something went wrong, status is ' + status);
  39.     });
  40.    }
  41.   }
复制代码
发表于 2017-1-10 14:20:22 | 显示全部楼层
LZ是闲人,天天发帖,坚定完毕
使用道具 举报

回复

发表于 2017-1-11 15:58:19 | 显示全部楼层
我完全是被标题<<使用jQuery或者原生js实现鼠标滚动加载页面新数据>>吸引过来的
使用道具 举报

回复

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关于我们
联系我们
  • 电话:010-86393388
  • 邮件:udn@yonyou.com
  • 地址:北京市海淀区北清路68号
移动客户端下载
关注我们
  • 微信公众号:yonyouudn
  • 扫描右侧二维码关注我们
  • 专注企业互联网的技术社区
版权所有:用友网络科技股份有限公司82041 京ICP备05007539号-11 京公网网备安1101080209224 Powered by Discuz!
快速回复 返回列表 返回顶部