详解闲鱼KUN嵌套滚动容器设计与实现

背景介绍

在电商频道/导购详情页中，为让页面信息呈现更多更丰富效果经常使用嵌套滚动容器搭建页面，常在大促/首页/频道/信息流等多SPU/多频道关键信息场景下使用，今年从kun支持第一个闲鱼超市业务到双十一项目整个过程中，悉数落地7个业务场景中嵌套滚动容器构建页面占据6个。

从技术角度，嵌套滚动容器组件属于复合性交互容器组件，包括手势冲突/交互体验/流畅度等方向会面临挑战，比如在H5因其机制在模拟手势交互过程会存在一些限制，为保证动态性/高性能/强体验，KUN 基于Flutter生态，构建一个复杂交互高性能的嵌套滚动跨端容器组件，保证其具备高性能/强交互/一致性/动态性，本文将详细解释kun实现嵌套滚动容器过程中面临挑战和解决方案。

容器核心能力设计

嵌套滚动通常称为Nested，其内部常为纵轴滚动+横轴滚动+纵轴滚动的嵌套组合，为同一方向的手势冲突问题需要特殊机制解决，典型业务场景下页面框架大致如下所示：

• • appBar：存在沉侵式/非沉侵式两种情况；

• • head：放置核心坑位元素；

• • Tab ：多频道/多品类的聚合SPU信息分类，经常具备吸顶/或吸附appBar底部能力；

• • PageView：具备横向滑动性质的聚合多页面，页面和tab数量一对一对应；

  • • head：在pageView内部二级Tab导购聚合SPU信息;

  • • listView/waterFall：核心的商品展示内容区；

从实际业务效果总结出容器架构至少必须保证如下几个关键核心能力：

• • 弹性效果：具备下拉刷新/上拉加载功能，保证弹性效果和iOS一致；

• • 多pinned吸顶：具备多元素吸顶效果，无论在head/tab/pageView-head区域都具备多元素叠加吸顶；

• • 滚动恢复：pageView中的容器滚动位置记录恢复；

• • 手势冲突：滑动连贯性以及手势冲突解决。

关键能力实现

弹性效果实现

• • 下拉刷新：由于nested内部使用的是clamping类型的physics，