第三轮 · 移动端组件
App / H5 / 小程序。移动端原生交互。
本轮 5 个：① NavBar（顶部导航栏）② TabBar（底部标签栏）③ ActionSheet（底部操作菜单）④ SwipeCell（左滑操作）⑤ PullRefresh + InfiniteScroll（下拉刷新 / 上拉加载）
1NavBar · 顶部导航栏
页面顶栏。左返回 / 中标题 / 右操作。3 种样式：默认（带底边）、透明（沉浸式）、大标题（iOS 风格）。
←
任务详情
⋯
页面内容区
←视频审核+
沉浸式内容区
我的任务
今天有 3 个待审核
大标题内容区
props: { title; leftIcon?; rightActions?; variant?: 'default'|'transparent'|'primary'; large? }
2TabBar · 底部标签栏
底部主导航。icon + 文字 + 红点/数字角标。固定底部，safe-area 适配。
页面内容区
props: { items: { icon; label; badge?: number|'dot' }[]; value; onChange }
3ActionSheet · 底部操作菜单
底部弹出的操作选项（区别 Dialog 居中弹窗）。移动端原生感，带遮罩 + 滑入动效。用于分享/删除/多操作选择。
点按钮触发底部操作菜单：
props: { open; title?; actions: { label; danger?; onClick }[]; cancelText?; onClose }
4SwipeCell · 左滑操作
列表项左滑露出操作按钮（删除/更多）。移动端列表标配交互。点下面的卡片切换展开状态。
当前状态：收起 ·
家居好物推荐
2026-07-24 · 视频
props: { leftActions?: { icon; label; onClick }[]; rightActions?; children }
5PullRefresh + InfiniteScroll · 下拉刷新 / 上拉加载
列表两件套。PullRefresh：下拉触发刷新（3 态：下拉中/松手刷新/完成）。InfiniteScroll：滚到底自动加载（loading/没有更多）。
↓ 下拉刷新（松手触发）
↑ 上拉加载更多（滚到底触发）
PullRefresh: { onRefresh; children } | InfiniteScroll: { onLoadMore; hasMore; loading }