参考饿了么、KFC、叮咚买菜等小程序商品列表,设计了两套支持二级分组方案,开发demo快速试错,选择效果更好得方案;通过数据拉取,分析出96%的门店商家商品总数在1000以下,确定优化目标重点是大幅提升这部分商家的体验。
基于scrollView和IntersectionObserver实现了一套支持分组标题吸顶、二级分组、锚定指定分组或商品的虚拟滑动列表。
分组与商品渲染逻辑分离,分组维度监听器负责接口请求和分组高亮;商品维度监听器负责商品渲染。大幅提高性能优化操作空间。
基于商品总数制定不同渲染规则和回收策略,让商品总数越少的商家体验越好,并最大程度的优化由商品高度自适应导致的分组切换时的抖动问题。