网页中,列表数据的分页加载、自动加载
1 简单说明
实际开发中,当数据量很大时,分页(分段)加载是必要的,不能一次性加载所有数据。 同时,当用户浏览到页面底部时,自动加载下一段数据并展示,可以增快新页面内容展现速度,提升用户体验。
2 分页加载
分页加载时,需要额外维护几条相关数据:offsetPage(当前页数)、hasNext(标志是否还有), 另外,可选择性添加fetching字段,用于表示数据正在加载。
data Model 的简易格式设计如下:
{list: [],hasNext: 1,offsetPage: 0,fetching:true
}
(ps: 服务端需要提供支持分段获取数据的API,比如可以通过设置limit, offset参数来指定数据区间)
分页加载大体流程为:
根据offsetPage以及预定义好的「每次加载数据条数limit」,设置分段加载的参数
异步加载数据时,先将fetching属性置为true,用于显示loading效果
数据获取完成后,将结果拼接到list数组后面,同时将fetching置为false、offsetPage++
3 自动加载
分段加载的思路很简单,下面说说自动加载的一种实现方式,先上实际开发项目中的截图。
滚动到「接近列表底部」时,可以看到「加载更多」字样,
当继续滚动页面到达底部时,则触发自动加载:
不难看出这里的实现思路就是「监听DOM的Scroll事件,当滚动到底部或者很接近的时候,触发下一页数据的加载」
具体到coding层面的实现,则需要先了解DOM元素的几个属性:scrollHeight、clientHeight、scrollTop等:
scrollHeight:容器元素中全部内容的高度(包括padding)
clientHeight:容器元素的可视区域(注意,这里不一定是浏览器窗口的高度)
借网上的图说明一下:
scrollTop: 滚动位置距离顶部的高度,当尚未滚动时,该值为0.
通过上诉三个值,即可计算出是否已经滚动到容器元素的底部位置了, 伪代码示意如下:
scrollEventListener(){let container = getContainerElement();if(container.scrollHeight - container.clientHeight - container.scrollTop < [一个较小的值]){//加载下一页//getNextPageData()}
}
4 小tips:
绑定Scroll事件时,先要确定Container Element, 也就是确定想要哪个容器元素有滚动条,这在DOM层级比较深的时候,容易混淆。一个容易犯的错误是没有给目标Container Element指定overflow样式的值,导致滚动条实际是父元素的,从而无法触发Scroll事件。
自动加载的页数可以视情况做出限制,比如设置为只自动加载前10页,再往后就需要手动点击「加载更多」。
网页中,列表数据的分页加载、自动加载相关推荐
- C#获取动态网页中的数据
删除线格式 # C#获取动态网页中的数据 在实际工作需求中,编辑的文档需要获取历史地震的信息,所以利用计算机语言获取是一个简化人工操作的必要过程,本文分享一下自己第一次获取交互信息的爬虫经历! 操作流 ...
- c语言编程网页数据提取,怎么用c语言抓取网页中的数据
当前位置:我的异常网» C语言 » 怎么用c语言抓取网页中的数据 怎么用c语言抓取网页中的数据 www.myexceptions.net 网友分享于:2013-07-17 浏览:390次 如何用c ...
- 【期末课设】python爬虫基础与可视化,使用python语言以及支持python语言的第三方技术实现爬虫功能,定向爬取网页的图片数据,并且实现批量自动命名分类下载。
1.大作业的内容 本要求使用python语言以及支持python语言的第三方技术实现爬虫功能,定向爬取网页的图片数据,并且实现批量自动命名分类下载. 2.案例需求 要求采用虚拟浏览器等动态爬虫技术,完 ...
- html 表格是网页中的数据,用 Pandas 读写网页中的 HTML 表格数据
介绍超文本标记语言(HTML)是用于构建网页的标准标记语言.我们可以使用HTML的 Programming LanguageCreatorYear CDennis Ritchie1972PythonG ...
- 从网页中读取数据 python_数据分析硬核技能:用 Python 爬取网页
我作为数据科学家的第一个任务,就是做网页爬取.那时候,我对使用代码从网站上获取数据这项技术完全一无所知,它偏偏又是最有逻辑性并且最容易获得的数据来源.在几次尝试之后,网页爬取对我来说就几乎是种本能行为 ...
- 实用干货:7个实例教你从PDF、Word和网页中提取数据
导读:本文的目标是介绍一些Python库,帮助你从类似于PDF和Word DOCX 这样的二进制文件中提取数据.我们也将了解和学习如何从网络信息源(web feeds)(如RSS)中获取数据,以及利用 ...
- python提取网页中表格数据_Python2 BeautifulSoup 提取网页中的表格数据及连接
网址:http://quote.eastmoney.com/ce- 要做的是提取网页中的表格数据(如:板块名称,及相应链接下的所有个股,依然是个表格) 暂时只写了这些代码: import urllib ...
- 【转载】使用 gnuplot 在网页中显示数据
来源:http://www.ibm.com/developerworks/cn/aix/library/au-gnuplot/ 简介 gnuplot 是一个用于生成趋势图和其他图形的工具.它通常用于收 ...
- php 类自动执行,php类中的魔术方法及类的自动加载
类的模式方法都是 public 的,以 两个下划线开头,在某些情况下自动被调用,有点类似 hook 或者 事件触发. 魔术方法的传参方式不能使用引用. __construct() : 构造函数,实例化 ...
- wps表格保存html,网页中的数据怎么导入excel表格数据-怎么把网页数据导入到wps表格中...
如何采集网页中的表格数据到Excel中 1.打开excel表格 2.打开菜单"数据"->入外部数据"->" Web 查询",在" ...
最新文章
- laravel ajax评论,javascript-Laravel 5.8尝试进行AJAX调用以删除评...
- 云闪付单个红包最高2018,这是要打败支付宝的节奏吗?
- Django Python MySQL Linux 开发环境搭建
- HDU5923-Prediction-有继承味道的并查集
- php soap调用asp.net webservice
- iOS自动化测试---使用的相关工具
- Java项目:宠物店管理系统(java+JSP+JavaScript+Bootstrap+Mysql)
- oracle19c报价_Oracle 19c下载
- 遥感图像场景分类数据集
- nginx全局配置文件通解
- 苹果计算机密码bug,苹果iOS 13系统新BUG:快速输入密码,解锁无效
- 用python爬取全国和全球疫情数据,并进行可视化分析(过程详细代码可运行)
- VBA中字典的写入技巧
- linux负载均衡之关于负载均衡
- C语言strtok函数的用法
- RabbitMQ 创建 virtual host
- 快速刷通PWN——序
- 中国代工企业进入汽车行业是为了摆脱苹果?恐怕是更好为苹果服务
- 教培机构如何抢占招生市场
- 读RedditOs源码