跳到内容
react-horizontal-scrolling-menu
示例
对比
npm
GitHub
English
简体中文
日本語
한국어
Русский
Español
Português (BR)
Français
Tiếng Việt
English
简体中文
日本語
한국어
Русский
Español
Português (BR)
Français
Tiếng Việt
示例:每种模式,在线运行,附完整源码
每个示例都是已发布 npm 包的可运行演示,外加背后的完整文件——可直接复制粘贴,并可在 Storybook 中实时编辑。与本网站其他内容一样服务端渲染。
基础
快速入门
最小菜单:项目、两个箭头,开箱即用的可见性。
每屏一个项目
单项宽的菜单——一张卡片占满整行。
一次滚动一个项目
箭头一次前进一个项目,而非一整页。
箭头置于菜单下方
箭头是你的组件——放在哪里都行。
位置与滚动
让点击的项目居中
scrollToItem 配 inline: center——可滚动标签页模式。
按 id 滚动到项目
用 apiRef 从外部触达菜单。
保存与恢复滚动位置
在卸载与页面重载之间保持滚动偏移。
自定义滚动动画
为程序化滚动自备缓动与时长。
滚动进度指示器
由可见项目驱动的进度条。
输入与手势
用鼠标拖拽滚动
鼠标拖拽的同时不破坏项目点击。
桌面端滑动
面向鼠标用户的惯性滑动。
移动端隐藏箭头
小屏仅触摸滚动,桌面端保留箭头。
阻止页面滚动
滚轮划过菜单时滚动菜单,而非页面。
动态项目
到达末尾时加载更多
由最后一个项目的可见性驱动的无限追加。
添加项目并滚动到它
筛选标签模式:先追加,再滚入可视区。
项目的进出动画
用 @formkit/auto-animate 实现增删动画。
5000 个项目依然流畅
原生滚动可扩展——这里无需虚拟化。
布局
垂直菜单
同一个菜单,自上而下滚动。
从右到左
RTL 翻转方向;箭头与分页随之改变。
配方
无限循环
来自公开 API 的无缝循环——无需改动库。
自动播放
带无障碍暂停行为的自动前进循环。
更喜欢沙盒?打开 Storybook