Rolling text animation, which can roll numbers and other types of text. Please upgrade vant to >= v4.6.0 before using this component.
Register component globally via app.use, refer to Component Registration for more registration ways.
import { createApp } from 'vue';\nimport { RollingText } from 'vant';\n\nconst app = createApp();\napp.use(RollingText);\nYou 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.
<van-rolling-text :start-num="0" :target-num="123" />\nYou 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.
<van-rolling-text :start-num="0" :target-num="432" direction="up" />\nYou 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.
<van-rolling-text :start-num="0" :target-num="54321" stop-order="rtl" />\nYou 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.
<van-rolling-text :text-list="textList" :duration="1" />\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const textList = ref([\n 'aaaaa',\n 'bbbbb',\n 'ccccc',\n 'ddddd',\n 'eeeee',\n 'fffff',\n 'ggggg',\n ]);\n return { textList };\n },\n};\nThe 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.
<van-rolling-text\n class="my-rolling-text"\n :height="54"\n :start-num="12345"\n :target-num="54321"\n/>\n.my-rolling-text {\n --van-rolling-text-background: #1989fa;\n --van-rolling-text-color: white;\n --van-rolling-text-font-size: 24px;\n --van-rolling-text-gap: 6px;\n --van-rolling-text-item-border-radius: 5px;\n --van-rolling-text-item-width: 40px;\n}\nAfter 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.
<van-rolling-text\n ref="rollingTextRef"\n :start-num="0"\n :target-num="54321"\n :auto-start="false"\n/>\n<van-grid clickable :column-num="3">\n <van-grid-item icon="play-circle-o" :text="start" @click="start" />\n <van-grid-item icon="replay" :text="reset" @click="reset" />\n</van-grid>\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const rollingTextRef = ref(null);\n const start = () => {\n rollingTextRef.value.start();\n };\n const reset = () => {\n rollingTextRef.value.reset();\n };\n return { rollingTextRef, start, reset };\n },\n};\n| Attribute | \nDescription | \nType | \nDefault | \n
|---|---|---|---|
| start-num | \nStart number | \nnumber | \n0 | \n
| target-num | \nTarget number | \nnumber | \n- | \n
| text-list | \nText array | \nstring[] | \n[] | \n
| duration | \nDuration of the animation, in seconds | \nnumber | \n2 | \n
| direction | \nRolling direction of the text, with down and up as the values | \nstring | \ndown | \n
| auto-start | \nWhether to start the animation | \nboolean | \ntrue | \n
| stop-order | \nOrder of stopping the animation of each digit, with ltr and rtl as the values | \nstring | \nltr | \n
| height | \nHeight of digit, px as unit | \nnumber | \n40 | \n
Use ref to get RollingText instance and call instance methods.
\n| Name | \nDescription | \nAttribute | \nReturn value | \n
|---|---|---|---|
| start | \nStart the animation | \n- | \n- | \n
| reset | \nReset the animation | \n- | \n- | \n
The component exports the following type definitions:
\nimport type {\n RollingTextProps,\n RollingTextInstance,\n RollingTextDirection,\n RollingTextStopOrder,\n} from 'vant';\nRollingTextInstance is the type of component instance:
import { ref } from 'vue';\nimport type { RollingTextInstance } from 'vant';\n\nconst rollingTextRef = ref<RollingTextInstance>();\n\nrollingTextRef.value?.start();\nThe component provides the following CSS variables, which can be used to customize styles. Please refer to ConfigProvider component.
\n| Name | \nDefault Value | \nDescription | \n
|---|---|---|
| --van-rolling-text-background | \ninherit | \nBackground color of a single digit | \n
| --van-rolling-text-color | \nvar(--van-text-color) | \nColor of the number | \n
| --van-rolling-text-font-size | \nvar(--van-font-size-md) | \nFont size of the number | \n
| --van-rolling-text-gap | \n0px | \nSpacing between digits | \n
| --van-rolling-text-item-width | \n15px | \nWidth of a single digit | \n
| --van-rolling-text-item-border-radius | \n0px | \nBorder radius of a single digit | \n