滑动到底部无限加载的实现

我们常常会碰到数据条数很多,需要分页显示的情况。对于移动端页面,我们一般会用每次滚动到接近页面底部时,加载更多(下一页)数据的方式。本文就来介绍下滑动到底部无限加载的实现。

实现滑动到底部无限加载,我们要做的是:

  • 监听显示数据内容的元素的滚动事件。
  • 每次元素滚动时,若此时不在加载数据,则计算元素下方没显示的高度值。如果其值小于我们设定的触发加载的值,则加载,显示更多数据;否则什么都不做。
  • 如果没有更多的内容可显示,则不再监视元素的滚动事件。

易知:元素下方没显示的高度值 = 元素总高度 - 元素垂直方向滚动了的距离 - 元素可视区域高度

各种值如下图所示:

size-describe

我们可知: 元素的 scrollHeight 属性值为其总高度。 元素的 scrollTop 属性值为其垂直方向滚动了的距离。 元素的 clientHeight 属性值为其可视区域高度。

因此, 元素下方没显示的高度值 = elem.scrollHeight - elem.clientHeight - elem.scrollTop

伪代码如下

 // 元素下方没显示的高度值小于TRIGGER_SCROLL_SIZE时,触发滚动
var TRIGGER_SCROLL_SIZE = 50;
var isLoading = false;
// $container 为显示数据内容的元素
$container.scroll(function () {
  if(!isLoading){
    var totalHeight = $container.prop('scrollHeight');
    var scrollTop = $container.scrollTop();
    var height = $container.height();
    if(totalHeight - (height + scrollTop) <= TRIGGER_SCROLL_SIZE){
      isLoading = true;
      // 加载更多数据
      fetchData().done(function(data){
        isLoadind = false;
        if(data.length > 0){
          appendData($container);
        } else {
          // 没有更多数据了。
          $container.off('scroll');
        }
      })
    }
  }
});

完整的 Demo 代码见这里

注意,如果显示内容的元素为 body,则取其垂直方向滚动了的距离要用 $(document).scrollTop()。否则会有兼容性问题。

参考

推荐阅读


本文遵守创作共享CC BY-NC-SA 4.0协议 网络平台如需转载必须与本人联系确认。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏积累沉淀

JavaScript 动态加载脚本和样式

3大点: 1.元素位置 2.动态脚本 3.动态样式 一.元素位置 getBoundingClientRect()。这个方法返回一个矩形对象,包含四个属性:lef...

25910
来自专栏地方网络工作室的专栏

css3 做一个会动的菜单 menu 按钮动画效果

css3 做一个会动的菜单 menu 按钮动画效果 需要做一个会的动画按钮效果,小前端部知道如何实现,我看了一眼需要的效果,给他写了一个简单的 demo。 设计...

35910
来自专栏王磊的博客

React Native顶|底部导航使用小技巧

导航一直是App开发中比较重要的一个组件,ReactNative提供了两种导航组件供我们使用,分别是:NavigatorIOS和Navigator,但是前者只能...

3106
来自专栏肖蕾的博客

解决安卓中XML文件声明高度 宽度无效的问题

1143
来自专栏从零开始学 Web 前端

从零开始学 Web 之 Vue.js(五)Vue的动画

在这里我会从 Web 前端零基础开始,一步步学习 Web 相关的知识点,期间也会分享一些好玩的项目。现在就让我们一起进入 Web 前端学习的冒险之旅吧!

1913
来自专栏梧雨北辰的开发录

iOS导航栏使用总结

2932
来自专栏coding

vue.js动画中的js钩子函数

在transition中还可以通过设置javascript钩子函数,实现自定义动画效果。

1083
来自专栏前端说吧

JS - 可自动伸缩高度的文本框

change事件的现象是,输入框失去焦点的时候才会触发。如果文本框内容超出高度然后用户还在输入的时候,体验就会很不好。而且如果用户一直不点击别的地方让texta...

3072
来自专栏每日一篇技术文章

IOS开发必须知道的3DLabel实现过程

最近写了很多关于SceneKit 的入门教程文章,初衷就是想给应用增加一点色彩,今天就教大家实现一个简单的3DLabel 的小框架.如果你的应用中需要实现3D字...

1201
来自专栏Nian糕的私人厨房

WeChat 文章列表页面(一)

本次的系列博文的知识点讲解和代码,主要是来自于 七月老师 的书籍《微信小程序开发:入门与实践》,由个人总结并编写,关于更多微信小程序开发中的各项技能,以及常见问...

1144

扫码关注云+社区

领取腾讯云代金券