页面导航
桌面的导航组件各管一段(Menu 管站点结构、Breadcrumb 管位置、Pagination 管翻页),移动端把它们压缩进两条动线:底部标签栏管一级入口,页栈返回管层级,中途的分页与页签则换成滚动与加载。
一级导航:底部标签栏
Menu 的多级树在移动端压平为 3–5 个底部页签,规则见布局与导航壳。超过 5 个一级入口说明信息架构需要重组:把低频入口合并进「我的 / 更多」页签的功能列表,而不是造「更多」标签页里再套九宫格。
位置感:返回栏替代面包屑
Breadcrumb 在移动端没有生存空间——窄屏放不下层级链,用户也不读。位置感由三件事共同承担:导航栏标题即当前位置、左上角返回箭头即上一级、必要时在页面内用「来源」单元格说明从哪来(如审批消息点进来的单据,在详情页标出来源渠道)。
页签:窄容器横向滚动
Tabs 在窄容器(375px 视口、手机侧栏)下自动进入横向滚动模式:页签溢出时可横滑(触控与滚轮皆可),激活页签自动滚入可视区,无需任何额外配置。这是本库为移动场景补齐的组件能力——此前超宽页签会被静默裁剪。
实现说明:溢出检测由组件内 ResizeObserver 驱动,容器变宽(旋转屏、窗口拉伸)时自动退出滚动态;「全部」这类入口型页签放第一位,激活时自动滚回最左。桌面宽容器下行为不变。
长列表:加载更多替代页码器
Pagination 的页码跳转在触屏上没有意义(用户不会「想去第 4 页」),改为加载更多按钮或触底自动加载;信息尾态用「没有更多了」收束,配合计数说明已加载数量。
下方演示即 LoadMore 组件(:auto-load="false" 改为点击触发, 便于观察;真机保持默认,滚动距底部 preload px 内自动触发)。触底自动加载的判定挂在 内容滚动区(IntersectionObserver 观察哨兵元素,组件已内置「最近滚动祖先」探测),不要挂 window——移动页面滚动发生在壳的内容区,见布局与导航壳。