简介
分页、优化、可视区域、无限加载
写前端页面时最经常遇到的开发需求之一就是 渲染后端数据返回的数据对象，当数据对象数量极多的时候便需要进行分页。
常见的分页方式有三种：
在页面底部生成 上一页、下一页、页面列表 按钮。
用户可以很直接的选择自己需要浏览的页面。
不需要担心页面数据过多造成的卡顿。
比起 自动加载更多数据 略显不智能。
在页面底部生成 加载更多数据 按钮。
相对于页面底部生成分页相关按钮体验好一点
用户可以控制自己是否需要加载更多数据。
比起 自动加载更多数据 略显不智能。
需要注意页面数据过多造成的卡顿。
当用户滚动到页面底部时 自动加载更多数据。
更符合用户直觉体验很好。
需要注意页面数据过多造成的卡顿。
如果页脚有其他数据用户需要翻遍数据才能看到页脚。
当然分页没有绝对的银弹得根据不同的情况进行略微的调整和交叉搭配使用分页方式。例如：页面页脚有需要用户查看的数据时，可以使用 自动加载更多数据，当加载二到三页时提示 加载更多数据 按钮，使得特定用户可以较为方便的看到页脚内容更多的情景就不一一列举了。
页面数据过多造成的卡顿可以参考 每日 30 秒之 chunk 中给出的情景案例，利用 数据分组显示 来减少 DOM 节点进而优化页面卡顿，这里不讨论分页及其相关的优化。
今天分享的代码是分页过程中会用到的一个函数 判断是否到达了页面底部：
// 该源码来自于 https://30secondsofcode.org const bottomVisible = () => document.documentElement.clientHeight + window.scrollY >= (document.documentElement.scrollHeight || document.documentElement.clientHeight);代码分析
窗口可见区域的高度 和 窗口已经滚动的距离高度 得到当前页面所处的位置：
document.documentElement.clientHeight + window.scrollY
再与 整个页面的高度 作比较来判断是否已经到达了页面底部，如果 整个页面的高度 不存在则使用 窗口可见区域的高度 做代替：
... >= (document.documentElement.scrollHeight || document.documentElement.clientHeight)
小技巧：利用 || 技巧来初始化数据使用场景
做一个无限加载数据项的分页功能，当页面到达底部时进行数据加载。
// 监听页面滚动
document.addEventListener("scroll", () => {
// 如果到达页面底部
if(bottomVisible()) {
// 1.发送网络请求获取数据
// 2.插入数据到页面
}
});
相似代码
判断是否到达了页面顶部
const topVisible = () => window.scrollY == 0一起成长
在困惑的城市里总少不了并肩同行的 伙伴 让我们一起成长。
如果您想让更多人看到文章可以点个 点赞。
如果您想激励小二可以到 Github 给个 小星星。
如果您想与小二更多交流添加微信 m353839115。
本文原稿来自 PushMeTop
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/109151.html
showImg(https://segmentfault.com/img/remote/1460000018891197); 简介 无障碍、WAI、ARIA、a11y、Accessibility、框架选择 如何向 视障用户 介绍兔子长什么样？有的同学可能会说： 毛茸茸的长耳朵。 短短圆圆的小尾巴。 红红的眼睛。 那如何向 视障用户 介绍网页长什么样？有看过 语义化与无障碍树 的同学可能会说： ...
简介 可视区域、页面优化、DOM节点多、图片懒加载、性能 可视区域是一个前端优化经常出现的名词，不管是显示器、手机、平板它们的可视区域范围都是有限。在这个 有限可视区域 区域里做到完美显示和响应，而在这个区域外少做一些操作来减少渲染的压力、网络请求压力。在 每日 30 秒之 对海量数据进行切割 中的使用场景，我们就是利用了 有限可视区域 只渲染一部分 DOM 节点来减少页面卡顿。 既然 可视区域 ...
showImg(https://segmentfault.com/img/remote/1460000018781682?w=900&h=500); 简介 剪贴板、复制、兼容 复制内容到剪贴板 是前端开发过程中会经常遇到的一个需求，大部分同学开发时往往会直接打开搜索框开始寻找别人写好的组件库，而聪明的同学会开始思考问题： 产品的使用场景是什么？ 是否需要兼容很多浏览器？ 是否在项目中需要频繁使用...
showImg(https://segmentfault.com/img/remote/1460000018770987?w=900&h=500); 简介 数组、every、any 判断一个数组中是否都满足特定的条件，如果满足则返回 true 否则返回 false。 // 该源码来自于 https://30secondsofcode.org const all = (arr, fn = Boole...
showImg(https://segmentfault.com/img/remote/1460000018808058?w=900&h=500); 简介 SEO、sitemap、搜索引擎优化、简单教程 在暧昧期和暗恋期时心里总是悬挂着： ta 为什么还不和我表白？ ta 是不是对我没感觉？ ta 是不是只是把我当备胎？ ta 是不是对谁都这样？ 解决问题最简单的方式就是直接 问问对方...
阅读 2333·2021-11-15 11:38
阅读 3543·2021-09-22 15:16
阅读 1186·2021-09-10 11:11
阅读 3154·2021-09-10 10:51
阅读 2918·2019-08-30 15:56
阅读 2772·2019-08-30 15:44
阅读 3183·2019-08-28 18:28
阅读 3524·2019-08-26 13:36
