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
Parameters | Description | Type | Default value |
---|---|---|---|
start-num | starting value | number | 0 |
target-num | target number | number | - |
text-list | Content array, used to flip non-numeric content | string | [] |
duration | animation duration in seconds | number | 2 |
direction | Text scrolling direction, values are down and up | string | down |
auto-start | Whether to automatically start animation | boolean | true |
stop-order | The order in which each digital animation is stopped, the values are ltr and rtl | string | ltr |
height | Number height in px | number | 40 |
method
Through ref, you can get the RollingText instance and call the instance method.
Method name | Description | Parameters | Return value |
---|---|---|---|
start | Start animation | - | - |
reset | reset 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.
Name | Default | Description |
---|---|---|
--z-rolling-text-background | inherit | Single digit background color |
--z-rolling-text-color | var(--z-text-color) | Numeric color |
--z-rolling-text-font-size | var(--z-font-size-md) | Font size |
--z-rolling-text-gap | 0px | The gap between digits |
--z-rolling-text-item-width | 30rpx | Single digit width |
--z-rolling-text-item-border-radius | 0px | Single digital border rounded corners |