目录
需求背景 :
列表页面,由于数据量过多时 在 IE 浏览器上面会加载异常缓慢,刚进入时页面空白无数据,导致用户体验感较差,所以需要整改优化。
这里就需要 前后端 联调 调整 了,
后端:需将接口由原来的传给前端的全部数据方式调整为 “分页传输” 方式,也就是前端再多传给后端两个字段值:currentPage:1,// 当前页数;pageSize:10,// 一页显示的条数( 当然这里我们是由后端写死了:5,一页固定传给前端 5 条数据,所以前端此字段可以不传 )
前端:进行 懒加载 处理,也就是 需借助 Element|InfiniteScroll 无限滚动 组件 来实现一个下拉至列表底部时,向后端请求下一页的数据用于拼接至列表数组后再次展示新的内容。【 PC 端 】
接下来就让我们来 了解 & 如何使用 吧:( 可参考 组件的 禁用加载 示例 )
前端:懒加载,移动端 需借助 Vant 2 |List 列表 组件 |基础用法 来实现一个下拉至列表底部时,向后端请求下一页的数据用于拼接至列表数组。
PC 端 :
InfiniteScroll 无限滚动
滚动至底部时,加载更多数据。
在前端开发中,很多页面都需要实现无限滚动的效果,即
原文地址:https://blog.csdn.net/weixin_58099903/article/details/135261605
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。