项目正在快速迭代中,API 与视觉细节可能随版本调整,请勿用于生产环境。

页面导航 ​

桌面的导航组件各管一段(Menu 管站点结构、Breadcrumb 管位置、Pagination 管翻页),移动端把它们压缩进两条动线:底部标签栏管一级入口,页栈返回管层级,中途的分页与页签则换成滚动与加载。

一级导航:底部标签栏 ​

Menu 的多级树在移动端压平为 3–5 个底部页签,规则见布局与导航壳。超过 5 个一级入口说明信息架构需要重组:把低频入口合并进「我的 / 更多」页签的功能列表,而不是造「更多」标签页里再套九宫格。

位置感:返回栏替代面包屑 ​

Breadcrumb 在移动端没有生存空间——窄屏放不下层级链,用户也不读。位置感由三件事共同承担:导航栏标题即当前位置、左上角返回箭头即上一级、必要时在页面内用「来源」单元格说明从哪来(如审批消息点进来的单据,在详情页标出来源渠道)。

9:41
订单详情
来自消息 · 审批提醒
09-08 10:24 · 张三推送给您
差旅报销单 CL-0908-01
¥1,860 · 审批中
左上角返回箭头回到消息列表,层级由页栈管理

页签:窄容器横向滚动 ​

Tabs 在窄容器(375px 视口、手机侧栏)下自动进入横向滚动模式:页签溢出时可横滑(触控与滚轮皆可),激活页签自动滚入可视区,无需任何额外配置。这是本库为移动场景补齐的组件能力——此前超宽页签会被静默裁剪。

9:41
项目动态
王芳上传了 3 个设计稿
10 分钟前
李工完成了里程碑 M3 验收
1 小时前
系统 · 昨日构建全部通过
昨天 22:04

实现说明:溢出检测由组件内 ResizeObserver 驱动,容器变宽(旋转屏、窗口拉伸)时自动退出滚动态;「全部」这类入口型页签放第一位,激活时自动滚回最左。桌面宽容器下行为不变。

长列表:加载更多替代页码器 ​

Pagination 的页码跳转在触屏上没有意义(用户不会「想去第 4 页」),改为加载更多按钮或触底自动加载;信息尾态用「没有更多了」收束,配合计数说明已加载数量。

9:41
报销单
CL-0908-01审批中
申请人
李工
金额
¥1,860
PO-0905-07已通过
申请人
王芳
金额
¥432

下方演示即 LoadMore 组件(:auto-load="false" 改为点击触发, 便于观察;真机保持默认,滚动距底部 preload px 内自动触发)。触底自动加载的判定挂在 内容滚动区(IntersectionObserver 观察哨兵元素,组件已内置「最近滚动祖先」探测),不要挂 window——移动页面滚动发生在壳的内容区,见布局与导航壳。