RollingText 翻滚文本

介绍

文本翻滚动效,可以翻滚数字和其他类型文本。

代码演示

基础用法

你可以通过 start-num 设置起始数值,target-num 设置目标数值。RollingText 组件会自动开始动画,从起始数值翻滚到目标数值。

<z-rolling-text :start-num="0" :target-num="123" />

设置翻滚方向

你可以通过 direction 属性设置数字的翻滚方向,默认为向下翻滚,设置为 up 即可向上翻滚。

<z-rolling-text :start-num="0" :target-num="432" direction="up" />

设置各数位停止顺序

你可以通过 stop-order 属性设置动画各个数位的停止先后顺序。默认先停止高位,设置为 rtl 可以先从个位停止。

<z-rolling-text :start-num="0" :target-num="54321" stop-order="rtl" />

翻转非数字内容

你可以使用 text-list 属性设置非数字内容的翻转。组件会从数组的第一项翻转到最后一项,请确保数组长度大于等于 2,以及每一项的长度一致。

<z-rolling-text :text-list="textList" :duration="1" />
import { ref } from 'vue';
const textList = ref([
  'aaaaa',
  'bbbbb',
  'ccccc',
  'ddddd',
  'eeeee',
  'fffff',
  'ggggg',
]);

自定义样式

RollingText 组件提供了一些 CSS 变量,你可以覆盖这些变量来自定义样式,也可以直接修改组件的样式。此外,你还可以通过 height 属性设置数字高度。

<view class="my-rolling-text">
  <z-rolling-text
    :start-num="12345"
    :target-num="54321"
    :auto-start="isStart4"
    :height="54"
  />
</view>
.my-rolling-text {
  --z-rolling-text-background: #1989fa;
  --z-rolling-text-color: white;
  --z-rolling-text-font-size: 48rpx;
  --z-rolling-text-gap: 12rpx;
  --z-rolling-text-item-border-radius: 10rpx;
  --z-rolling-text-item-width: 80rpx;
}

手动控制

通过 ref 获取到组件实例后,你可以调用 startreset 方法,start 方法用于开始动画,reset 方法用于重置动画。

<view class="my-rolling-text">
  <z-rolling-text
    ref="rollingTextRef"
    :start-num="0"
    :target-num="54321"
    :auto-start="false"
    :height="54"
  />
</view>
<z-grid
  clickable
  :column-num="2"
  :custom-style="{ 'margin-top': '20rpx' }"
>
  <z-grid-item icon="play-circle" text="开始" @click="start" />
  <z-grid-item icon="reload" text="重置" @click="reset" />
</z-grid>
import { ref } from 'vue';
const rollingTextRef = ref(null);
const start = () => {
  rollingTextRef.value.start();
};
const reset = () => {
  rollingTextRef.value.reset();
};

API

Props

参数说明类型默认值
start-num起始数值number0
target-num目标数值number-
text-list内容数组,用于翻转非数字内容string[]
duration动画时长,单位为秒number2
direction文本翻滚方向,值为 downupstringdown
auto-start是否自动开始动画booleantrue
stop-order各个数位动画停止先后顺序,值为 ltrrtlstringltr
height数字高度,单位为 pxnumber40

方法

通过 ref 可以获取到 RollingText 实例并调用实例方法。

方法名说明参数返回值
start开始动画--
reset重置动画--

主题定制

样式变量

组件提供了下列 CSS 变量,可用于自定义样式,使用方法请参考 ConfigProvider 组件

名称默认值描述
--z-rolling-text-backgroundinherit单个数位背景色
--z-rolling-text-colorvar(--z-text-color)数字颜色
--z-rolling-text-font-sizevar(--z-font-size-md)字体大小
--z-rolling-text-gap0px数位之间的间隔
--z-rolling-text-item-width30rpx单个数位宽度
--z-rolling-text-item-border-radius0px单个数位边框圆角