微信小程序中如何实现虚拟列表的典型应用案例？

本文共计988个文字，预计阅读时间需要4分钟。

目录+前言+什么是虚拟列表？+demo效果+准备工作+筛选框高度+优化+总结+前言+股票热门榜单有4000多条，显示到页面上在盘中还需实时更新，如果采用接口和分页，当下拉几十页的时候“

目录

• 前言
• 什么是虚拟列表？
• demo效果
• 准备工作
• 屏高&盒子高度
• 优化
• 总结

前言

股票热门榜单有4000多条，渲染到页面上在盘中时还得实时更新，如果采用接口和分页，当下拉几十页的时候页面会变的越来越卡并且还得实时更新，最后的做法是一开始数据就从ws传递过来，我们只需要传起始下标和结束下标即可，在页面上我们也只生成几个标签。大大减轻了渲染压力。

什么是虚拟列表？

就只指渲染可视区域内的标签，在滚动的时候不断切换起始和结束的下标来更新视图，同时计算偏移。

demo效果

准备工作

• 计算一屏可展示多少个列表。
• 盒子的高度。
• 滚动中起始位置。
• 滚动中结束位置。
• 滚动偏移量。

屏高&盒子高度

在小程序中我们可以利用wx.createSelectorQuery来获取屏高以及盒子的高度。