RollingText - Vant 4

RollingText

Introduction

Rolling text animation, which can roll numbers and other types of text. Please upgrade vant to >= v4.6.0 before using this component.

Install

Register component globally via app.use, refer to Component Registration for more registration ways.

import { createApp } from'vue'; import { RollingText } from'vant'; const app = createApp(); app.use(RollingText);

Usage

Basic Usage

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

Set Rolling Direction

You can set the rolling direction of the numbers using the direction prop. By default, it rolls downwards, but you can set it to up to roll upwards.

Set Stop Order

You can set the order of stopping the animation of each digit through the stop-order prop. By default, it stops from the higher digits. Setting rtl can stop from the ones digit.

Roll Non-numeric Text

You can reverse non-numeric content by using the text-list prop. The component will rolling from the first item to the last item in the array. Please make sure that the array length is greater than or equal to 2, and that each item has the same length.

import { ref } from'vue'; exportdefault { setup() { const textList = ref([ 'aaaaa', 'bbbbb', 'ccccc', 'ddddd', 'eeeee', 'fffff', 'ggggg', ]); return { textList }; }, };

Custom Style

The RollingText component provides some CSS variables that you can override to customize the style, or you can directly modify the component's style. Additionally, you can set the height of the numbers using the height prop.

.my-rolling-text { --van-rolling-text-background: #1989fa; --van-rolling-text-color: white; --van-rolling-text-font-size: 24px; --van-rolling-text-gap: 6px; --van-rolling-text-item-border-radius: 5px; --van-rolling-text-item-width: 40px; }

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.

import { ref } from'vue'; exportdefault { setup() { const rollingTextRef = ref(null); conststart = () => { rollingTextRef.value.start(); }; constreset = () => { rollingTextRef.value.reset(); }; return { rollingTextRef, start, reset }; }, };

API

Props

Attribute	Description	Type	Default
start-num	Start number	number	0
target-num	Target number	number	-
text-list	Text array	string[]	[]
duration	Duration of the animation, in seconds	number	2
direction	Rolling direction of the text, with down and up as the values	string	down
auto-start	Whether to start the animation	boolean	true
stop-order	Order of stopping the animation of each digit, with ltr and rtl as the values	string	ltr
height	Height of digit, px as unit	number	40

Methods

Use ref to get RollingText instance and call instance methods.

Name	Description	Attribute	Return value
start	Start the animation	-	-
reset	Reset the animation	-	-

Types

The component exports the following type definitions:

importtype { RollingTextProps, RollingTextInstance, RollingTextDirection, RollingTextStopOrder, } from'vant';

RollingTextInstance is the type of component instance:

import { ref } from'vue'; importtype { RollingTextInstance } from'vant'; const rollingTextRef = ref<RollingTextInstance>(); rollingTextRef.value?.start();

Theming

CSS Variables

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

Name	Default Value	Description
--van-rolling-text-background	inherit	Background color of a single digit
--van-rolling-text-color	var(--van-text-color)	Color of the number
--van-rolling-text-font-size	var(--van-font-size-md)	Font size of the number
--van-rolling-text-gap	0px	Spacing between digits
--van-rolling-text-item-width	15px	Width of a single digit
--van-rolling-text-item-border-radius	0px	Border radius of a single digit