uniapp scroll-view 虚拟滚动【适合每条数据高度一致】

基本原理

  • 有一万条数据,我们按10条一页来进行分组,会有1000页
  • 页面滚动到第10页的位置的时候,10页之后和10页之前是不用被显示的,可以直接隐藏掉
  • 如果是数据删除,页面会不流畅,会卡顿一下,且滚动位置也会变
  • 为了保证页面流畅性,我们可以前后各安置一个占位 view(div),前为 prev 后为 next
  • 滚动的时候,动态的改变可视区域的内容且动态的改变前置占位和后置占位的高度

具体实现

简述
  1. js 部分,初始化计算出可视列表,前置占位高度,后置占位高度
  2. html 部分,在 scroll 时,调用js方法,更新可是列表,前置占位高度,后置占位高度

计算出可视列表,前置占位高度,后置占位高度

通过 scrollTop 我们可以精确知道往上滚动了多少项,此时可以精确计算出应该显示的项

  1. 我们首先给 list 所有项增加 pageNumber,以 10 项为一页
  2. 当滚动的时候通过如下计算,可能知道滚动了多少页,得到 scrolledPageNumber
js 复制代码
// 滚动到不可见区域的 item 数量
const scrolledItemNumber = Math.floor(top / 50)
// 滚动到不可见区域的 page 数量
const scrolledPageNumber = Math.floor(scrolledItemNumber / 10)
  1. 为了保证快速滚动的时候,页面往前翻和往后翻都有数据【不出现空白】

我们将可视页码改为 前一页 + 当前页 + 后一页,注意兼容初始页【1,2,3】 的情况

  1. 根据 [5,6,7] 计算出可视列表,前后高度
js 复制代码
// 获取当前可视页面号码数组
let visibleNumbers = virtualList.visiblePageNumbers
// 计算可视列表的起始位置(页码-1)乘以每页的项数
let start = (visibleNumbers[0] - 1) * pageSize
// 计算可视列表的结束位置(最后一页的页码)乘以每页的项数
let end = visibleNumbers[visibleNumbers.length - 1] * pageSize
// 如果起始位置小于0,则修正为0
if (start < 0) start = 0
// 如果结束位置大于列表总长度,则修正为列表的最后一个位置
if (end > virtualList.list.length - 1) end = virtualList.list.length
// 根据起始和结束位置,从总列表中提取出可视部分的列表
virtualList.visibleList = virtualList.list.slice(start, end)

// 计算列表前的占位高度(起始位置乘以每项的高度)
virtualList.beforePlaceHeight = start * itemHeight
// 计算列表后的占位高度(总长度减去结束位置后的项数乘以每项的高度)
virtualList.afterPlaceHeight = (virtualList.list.length - end) * itemHeight
相关推荐
2501_915918416 小时前
iOS 26 App 性能测试|性能评测|iOS 26 性能对比:实战策略
android·macos·ios·小程序·uni-app·cocoa·iphone
用户9047066835716 小时前
uniapp Vue3版本,用pinia存储持久化插件pinia-plugin-persistedstate对微信小程序的配置
前端·uni-app
乔冠宇18 小时前
uniapp创建ts项目tsconfig.json报错的问题
uni-app
细节控菜鸡18 小时前
【2025最新】uniapp 中基于 request 封装实现多文件上传完整指南
uni-app
fakaifa18 小时前
【全开源】企业微信SCRM社群营销高级版系统+uniapp前端
uni-app·开源·企业微信·scrm·源码下载·企业微信scrm
棋子一名20 小时前
跑马灯组件 Vue2/Vue3/uni-app/微信小程序
微信小程序·小程序·uni-app·vue·js
游戏开发爱好者821 小时前
BShare HTTPS 集成与排查实战,从 SDK 接入到 iOS 真机调试(bshare https、签名、回调、抓包)
android·ios·小程序·https·uni-app·iphone·webview
2501_916008891 天前
iOS 26 系统流畅度实战指南|流畅体验检测|滑动顺畅对比
android·macos·ios·小程序·uni-app·cocoa·iphone
2501_915106321 天前
苹果软件加固与 iOS App 混淆完整指南,IPA 文件加密、无源码混淆与代码保护实战
android·ios·小程序·https·uni-app·iphone·webview
2501_915921431 天前
iOS 26 崩溃日志解析,新版系统下崩溃获取与诊断策略
android·ios·小程序·uni-app·cocoa·iphone·策略模式