用途:用于构建移动优先或响应式 Web 应用,实现接近原生手感的移动端交互,解决桌面组件在手机上体验别扭的问题。
主要能力:提供底部导航(MobileNav)、底部抽屉(BottomSheet)、下拉刷新(PullToRefresh)和滑动行(SwipeableRow)四类组件,均基于 TypeScript/React 与触摸事件实现。底部导航固定在底部并支持安全区;底部抽屉支持下拉手势关闭、打开时锁定 body 滚动;下拉刷新在容器滚动到顶部时触发,带阈值与加载动画;滑动行支持左右滑动触发操作并显示左右操作区。
使用方式:按资料中的组件签名引入并传入对应 props,例如 MobileNav 接收 items 数组(href、label、icon),BottomSheet 接收 isOpen、onClose、children、title,PullToRefresh 接收 onRefresh 与 children,SwipeableRow 接收 onSwipeLeft、onSwipeRight、leftAction、rightAction。示例页面将下拉刷新、滑动行、底部抽屉与底部导航组合使用。
适用场景:移动端仪表盘、列表页、设置页等需要底部导航、详情抽屉、下拉刷新和滑动删除的界面。
限制与注意:资料未提供安装命令、依赖版本、框架适配范围或收费信息。最佳实践要求触控目标最小 44x44px(Apple)或 48x48dp(Google),底部导航使用 safe-area-bottom,触摸时提供视觉反馈,抽屉打开时锁定 body 滚动,拖拽手柄使用 touch-none 防止滚动干扰。常见错误包括触控目标过小、未处理安全区、缺少激活态、卸载时未恢复 body 滚动、下拉刷新未做防抖。相关模式为 design-tokens 与 pwa-setup。