写在前面
网上关于虚拟列表的文章不少，原理讲的很透彻了。但综合性的应用几乎见不到。
效果预览与源码
相关文章
简单分析: h5实现外卖APP的效果 - 掘金 (juejin.cn)
简单分析: h5实现某外卖APP的效果(2) - 掘金 (juejin.cn)
简单分析: h5实现某外卖APP的效果(3)--抛物线动画 - 掘金 (juejin.cn)
个人分析的某外卖APP菜单效果特点
- 数据应该不是一次性加载过来的，因为有些大超市也在上面，通常这类店铺的商品会很多
- 也不像是简单的点击分类，就只加载这个分类下的数据，因为单个分类下可能也有很多数据，到了当前分类的底部再向下滑动或到了当前分类的顶部，再向上滑动，可以进入下一个或上一个分类
- 两个分类进行滑动切换时，有类似sticky的效果
基于特点分析推测实现要点
- 既然数据量大，那最有可能的方案就是虚拟列表或者说虚拟滚动，这能保证无论数据量多寡，dom数量都相对稳定
- 因为能点击分类，重新出现菜单数据后，还可以向前滑动(网速慢的时候，此时会卡一下，猜测是在从后端加载数据)，那么这个虚拟列表需要支持向后追加，也需要支持向前追加，才能实现类似的效果
- 原本以为sticky效果，直接用css的sticky定位即可，但采用虚拟列表之后，就无法直接用css实现了(因为向上滚动的情况下，可能上个分类dom还不存在)。那就只能通过js实现类似效果
