移动端H5实现上滑分页加载功能
2023-02-18 16:28:29 时间
持续创作,加速成长!这是我参与「掘金日新计划 · 6 月更文挑战」的第5天,点击查看活动详情
前言
想必掘友们应该都知道,pc 端的上下分页的一般都是通过点击页码来实现的。但在移动端这种方式就不太合适了,移动端一般都是通过向上滑动页面,触底后加载下一页这种方式来实现的。只要后台有源源不断的数据提供,用户可以一直无限向上滑触底加载下页内容,会有种上瘾停不下来的感觉,让用户有更多时间停留在我们的产品上。 本着这个原因,本文就记录一下整过实现过程。
实现过程
思路:要达到触底的条件就是:滚动条的总高度 = 等于可视区的高度+滚动条距离顶部的高度;掘友们应该都知道我们可以通过监听页面的滑动事件来获取这三个值,然后进行一些操作就实现这个功能。
具体实现的代码: 绑定监听的滑动事件函数
<template>
<div @scroll="pageScroll">
<!-- 里面是循环遍历的数据 -->
</div>
</template>
// 页面滚动
pageScroll(e) {
//变量scrollTop是滚动条滚动时,距离顶部的距离
var scrollTop = e.target.scrollTop;
//变量windowHeight是可视区的高度
var windowHeight = e.target.clientHeight;
//变量scrollHeight是滚动条的总高度
var scrollHeight = e.target.scrollHeight;
//滚动条到底部的条件
if (scrollTop + windowHeight == scrollHeight) {
if (this.listData.length < this.total) {
this.pageNo++
// 获取下一页的数据
this.getNextPageData()
}
}
}
通过绑定监听滑动事件函数,当页面滑动触底后,根据后端接口提供的数据判断当前页是否小于总页数,如果小于就获取下一页的数据。否则停止触底后下一页数据。
实现效果如下
图片来源:https://juejin.cn/post/6897115352896339976
总结
- 这种方式确实很简单易懂,但也有优化的地方;因为调用后端接口网络请求是异步且有一定的请求时间的,所以我们可以通过封装一个节流函数来控制触底后调后端接口的频率。提高性能。
- 还有页面交互上的优化,比如上滑触底后调后端接口的时间可以在页面底部放一个加载中的一个 loading 动态效果 这篇文章就记录到这了,下次有时间再写一篇用节流函数对 scroll 优化和防抖函数的作用的文章。
写在最后
我是 AndyHu,目前暂时是一枚前端搬砖工程师。
文中如有错误,欢迎在评论区指正,如果这篇文章帮到了你,欢迎点赞和关注呀?
未经许可禁止转载?
speak less,do more.
相关文章
- 使用Angular构建单页面应用(SPA)
- 如何在 pyqt 中实现桌面歌词
- 对 python 中 @property 和计算属性的一些思考
- 如何使用 numpy 和 pytorch 快速计算 IOU
- 实践案例丨基于ModelArts AI市场算法MobileNet_v2实现花卉分类
- 美女面试官问我Python如何优雅的创建临时文件,我的回答....
- 绝了,华为云服务器“The 3”出道,每款都很能打
- Volcano火山:容器与批量计算的碰撞
- 【华为云技术分享】LiteOS无法直接烧录或者烧录失败解决方法--ST-Link
- 快速了解云原生中的微服务应用(内含福利)
- 从软件开发到 AI 领域工程师:模型训练篇
- 【福利活动】华为云“上云之路”征文大赛开启,FreeBuds3无线耳机等重磅好礼送不停
- 【儿童节特辑】风格迁移——让你的照片秒变手绘日漫风
- 【极客思考】计算机网络:Wireshark抓包分析TCP中的三次握手与四次挥手
- 低代码开发平台发展趋势:低代码——炒作还是趋势?
- 我们谈自动驾驶网络到底在谈什么?
- 【昇腾】ModelArts与Atlas 200 DK云端协同开发——行人检测Demo(完整版)
- 疫情数据背后,聊聊数据分析平台变迁史
- 华为五大专家亲述:如何转型搞 AI?
- 【华为云技术分享】LwM2M协议的学习与分享