reelkitReelKit

快速开始

reelkit 是一个单条目滑动器 —— 同一时间只显示一个条目，就像 TikTok、Instagram Reels 或 Stories。非常适合竖向视频流、全屏画廊和可滑动的内容。

0.x.x —— API 尚未稳定

ReelKit 正在活跃开发中。在 0.x.x 期间，API 可能在次版本之间发生变化，且不保证有废弃过渡期。 请锁定版本号，避免意外的破坏性变更。

选择你的框架

在线试用

直接在浏览器里试，无需安装：

快速上手

用 React 写一个最小的竖向滑动器：

tsx

快速上手

用 Angular 写一个最小的竖向滑动器：

typescript

快速上手

用 Vue 写一个最小的竖向滑动器：

vue

核心概念

Reel

Reel 组件是主容器，负责管理滑动器状态、处理触摸手势、键盘导航和动画。 它通过 itemBuilder 这一 render prop 模式来渲染幻灯片。

itemBuilder

itemBuilder 属性是一个函数，接收索引并返回该幻灯片的内容。 正是这个模式让虚拟化成为可能 —— 只有可见的条目会被渲染。

ReelIndicator

可选组件，显示 Instagram 风格的进度指示器，标出当前在滑动器中的位置。

tsx
html
vue-html

内置的导航方式：

  • 触摸 / 滑动： 拖动即可翻页，带惯性和吸附
  • 键盘： 方向键（浮层组件还会处理 Escape 关闭）
  • 鼠标滚轮： 用 enableWheel 属性开启
  • 编程式： 通过 apiRef 调用 next()、 prev()、 goTo()
tsx
html
vue

下一步