RollText

快速开始

RollText 用于展示在元素自身宽度/高度内无法完整显示的文字。通过 forward 控制滚动方向，并将需要滚动的文本放在默认插槽中。需要限制可视区域时，直接在组件上设置 width / height 即可。

水平滚动

<fv-roll-text
    style="width: 260px;"
    :theme="theme"
    forward="right"
    mode="once"
    :duration="2500"
    :offset="160"
>
    这段标题太长了，在窄导航栏中显示不下
</fv-roll-text>

垂直滚动

<fv-roll-text
    style="width: 240px; height: 72px; border: 1px solid var(--vp-c-divider); border-radius: 4px; padding: 4px 8px;"
    :theme="theme"
    forward="down"
    mode="loop"
    :duration="2500"
    :interval="600"
>
    <div style="height: 22px; line-height: 22px;">1. 第一条公告</div>
    <div style="height: 22px; line-height: 22px;">2. 第二条公告</div>
    <div style="height: 22px; line-height: 22px;">3. 第三条公告</div>
    <div style="height: 22px; line-height: 22px;">4. 第四条公告</div>
    <div style="height: 22px; line-height: 22px;">5. 第五条公告</div>
</fv-roll-text>

滚动模式

mode 支持以下值：

• once：一次性单向滚动。
• repeat：多次单向滚动，每次到终点后等待 interval，再从起点重新开始。
• bounce：来回滚动一次。
• loop：循环来回滚动。
• none：关闭自动滚动，适合只用手动滚动的场景。

<fv-roll-text
    style="width: 260px;"
    :theme="theme"
    forward="right"
    mode="loop"
    :duration="1800"
    :interval="400"
    :offset="120"
>
    循环来回滚动
</fv-roll-text>

手动滚动

设置 manual 可以允许鼠标滚轮或触摸手动滚动。自动滚动过程中会锁定手动滚动，因此纯手动示例请使用 mode="none"。

<fv-roll-text
    style="width: 240px; height: 72px; border: 1px solid var(--vp-c-divider); border-radius: 4px; padding: 4px 8px;"
    :theme="theme"
    forward="down"
    mode="none"
    :manual="true"
>
    <div style="height: 22px; line-height: 22px;">1. 第一条公告</div>
    <div style="height: 22px; line-height: 22px;">2. 第二条公告</div>
    <div style="height: 22px; line-height: 22px;">3. 第三条公告</div>
    <div style="height: 22px; line-height: 22px;">4. 第四条公告</div>
    <div style="height: 22px; line-height: 22px;">5. 第五条公告</div>
</fv-roll-text>

悬停触发

使用 trigger="hover" 可以在鼠标悬停在组件上时才启动滚动，鼠标移出后停止。

<fv-roll-text
    style="width: 260px;"
    :theme="theme"
    forward="right"
    mode="loop"
    :duration="1800"
    :interval="400"
    :offset="120"
    trigger="hover"
>
    这是一段足够长的标题文字，在狭窄的导航栏中无法完整显示，因此鼠标悬停在这里时会持续滚动，移出后自动停止
</fv-roll-text>

属性

---

属性	类型	必填	默认值	说明
forward	string	否	'right'	滚动方向。支持 right、left、horizontal、down、up 和 vertical。
mode	string	否	'once'	播放模式。支持 once、repeat、bounce、loop 和 none。
trigger	string	否	'auto'	动画触发方式。auto 自动开始；hover 鼠标进入时开始、移出时停止。
duration	number	否	3000	单次滚动的持续时间，单位为毫秒。
delay	number	否	0	动画开始前的延迟时间，单位为毫秒。
interval	number	否	1000	重复滚动或来回滚动之间的暂停时间，单位为毫秒。
offset	number / string	否	null	滚动位移距离，单位为像素。为 null 时自动使用完整溢出距离；设为 0 可关闭滚动。
ease	string	否	'power1.inOut'	滚动动画使用的 GSAP 缓动函数。
manual	boolean	否	false	是否允许鼠标 / 触摸手动滚动。自动滚动过程中始终禁止手动滚动。
theme	string	否	'global'	主题样式。支持 global、light、dark 和 custom。
disabled	boolean	否	false	是否禁用组件。
lang	string	否	"global"	语言选项。

事件

---

事件名	参数	说明
start	-	动画开始时触发。
iteration	-	每次重复或来回滚动周期完成时触发。
end	-	有限动画结束时触发。

插槽

---

1. Default

默认插槽用于放置需要滚动的文本。

<fv-roll-text>
    内容
</fv-roll-text>