RollingText

introduce

Text scrolling effect, you can scroll numbers and other types of text.

Code Demo

Basic usage

You can set the starting value with start-num and the target value with target-num. The RollingText component will automatically start animation and roll from the starting value to the target value.

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

Set the rolling direction

You can set the scrolling direction of the number through the direction attribute. The default is to scroll down. Set it to up to scroll up.

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

Set the stop sequence of each digit

You can set the stopping order of each digit of the animation through the stop-order property. By default, the high position is stopped first, and if set to rtl, it can be stopped from the ones position first.

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

Flip non-numeric content

You can set the flipping of non-numeric content using the text-list attribute. The component will flip from the first item to the last item in the array. Please ensure that the array length is greater than or equal to 2, and that the length of each item is consistent.

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

Custom style

The RollingText component provides some CSS variables. You can override these variables to customize the style, or you can directly modify the component's style. Additionally, you can set the height of the number via the height property.

<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;
}

Manual control

After obtaining the component instance through ref, you can call the start and reset methods. The start method is used to start the animation, and the reset method is used to reset the animation.

<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="Start" @click="start" />
   <z-grid-item icon="reload" text="Reset" @click="reset" />
</z-grid>
import { ref } from 'vue';
const rollingTextRef = ref(null);
const start = () => {
   rollingTextRef.value.start();
};
const reset = () => {
   rollingTextRef.value.reset();
};

API

Props

ParametersDescriptionTypeDefault value
start-numstarting valuenumber0
target-numtarget numbernumber-
text-listContent array, used to flip non-numeric contentstring[]
durationanimation duration in secondsnumber2
directionText scrolling direction, values are down and upstringdown
auto-startWhether to automatically start animationbooleantrue
stop-orderThe order in which each digital animation is stopped, the values are ltr and rtlstringltr
heightNumber height in pxnumber40

method

Through ref, you can get the RollingText instance and call the instance method.

Method nameDescriptionParametersReturn value
startStart animation--
resetreset animation--

Theme customization

Style variables

The component provides the following CSS variables, which can be used to customize styles. For usage, please refer to ConfigProvider component.

NameDefaultDescription
--z-rolling-text-backgroundinheritSingle digit background color
--z-rolling-text-colorvar(--z-text-color)Numeric color
--z-rolling-text-font-sizevar(--z-font-size-md)Font size
--z-rolling-text-gap0pxThe gap between digits
--z-rolling-text-item-width30rpxSingle digit width
--z-rolling-text-item-border-radius0pxSingle digital border rounded corners