文档章节

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

放开那个女孩
 放开那个女孩
发布于 2017/07/04 14:29
字数 518
阅读 20
收藏 1

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

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

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

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

各种值如下图所示:

我们可知:
元素的 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()。否则会有兼容性问题。

参考

推荐阅读

本文转载自:http://www.imooc.com/article/7945

放开那个女孩
粉丝 4
博文 112
码字总数 43124
作品 0
杭州
程序员
私信 提问
原生js之列表优化-无限滚动实例

参考 js实现文字列表无缝滚动效果 参考给出的是一个字幕自动滚动的例子,不过这个例子有个坑,就是必须设置高度,否则的话,看不到滚动的效果。代码如下: 作为一个例子,这个已经是非常棒的...

晓乐凡
2018/07/23
0
0
JS实现-页面数据无限加载(博主未测试版)

在手机端浏览网页时,经常使用一个功能,当我们浏览京东或者淘宝时,页面滑动到底部,我们看到数据自动加载到列表。之前并不知道这些功能是怎么实现的,于是自己在PC浏览器上模拟实现这样的功...

AAASSSSddd
2016/09/18
30
0
lucky_jayce/ViewPagerIndicator

ViewPagerIndicator ###1. 支持自定义tab样式 ###2. 支持自定义滑动块样式和位置 ###3. 支持自定义切换tab的过渡效果 ###4. 支持子界面的预加载和界面缓存 ###5. 支持设置界面是否可滑动 ##...

lucky_jayce
2016/01/17
0
0
lucky_jayce/CoolRefreshView

CoolRefreshView ###1. 支持任意View的刷新 ###2. 支持自定义Header ###3. 支持NestedScrollingParent,NestedScrollingChild的事件分发 ###4. 嵌套ViewPager不会有事件冲突 ###7.导入方式 <1......

lucky_jayce
2017/03/11
0
0
Android仿今日头条详情页实现

## 源码地址: [Android仿今日头条详情页实现 github源码地址](https://github.com/iceAnson/NewsDetail) [动态图](https://www.diycode.cc/topics/589) 最近项目有个需求,需要实现一个和今...

ice_Anson
2017/02/06
1K
0

没有更多内容

加载失败,请刷新页面

加载更多

Jenkins系列_插件安装及报错处理

进入Jenkins之后我们可以进行插件的安装,插件管理位于以下模块: 发现上面报了一堆错误,是因为插件的依赖没有安装好,那么这一节,就先把这些错误解决掉吧。解决完成后,也就基本会使用插件...

shzwork
今天
2
0
mysql mysql的所有查询语句和聚合函数(整理一下,忘记了可以随时看看)

查询所有字段 select * from 表名; 查询自定字段 select 字段名 from 表名; 查询指定数据 select * from 表名 where 条件; 带关键字IN的查询 select * from 表名 where 条件 [not] in(元素...

edison_kwok
昨天
9
0
多线程同时加载缓存实现

import com.google.common.cache.Cache;import com.google.common.cache.CacheBuilder;import java.util.concurrent.ExecutionException;import java.util.concurrent.ExecutorServi......

暗中观察
昨天
3
0
利用VisualVM 内存查看

准备工作,建几个测试类。等下就是要查看这几个类里面的属性 package visualvm;public class MultiObject { private String str; private int i; MultiObject(String str...

冷基
昨天
2
0
组装一台工作游戏两用机

一、配置清单如下: 分类 项目 价格(元) 主板 华硕(ASUS)TUF Z370-PLUS GAMING II 电竞特工 Z370二代 支持9代CPU 1049 CPU 英特尔(Intel) i7 8700K 酷睿六核 盒装CPU处理器 2640 风扇 九...

mbzhong
昨天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部