介绍
从某一个数值动态递增或递减到另一个数值。
引入
js
import CountTo from 'sard-uniapp/components/count-to/count-to.vue'代码演示
基础使用
给 value 属性一个数字值即可启动滚动功能。
vue
<template>
<sar-count-to :value="5000" />
</template>小数位数
使用 precision 属性设置小数位数。
vue
<template>
<sar-count-to :value="1997.71" :precision="2" />
</template>分隔符
使用 separator 属性设置千分位分隔符。
vue
<template>
<sar-count-to :value="1997.71" separator="," :precision="2" />
</template>持续时间
使用 duration 属性设置滚动时长。
vue
<template>
<sar-count-to
:value="1997.71"
separator=","
:precision="2"
:duration="1000"
/>
</template>随机数字
value 属性改变时会自动滚动到最新的值。
vue
<template>
<sar-count-to :value="number" />
<sar-button @click="onClick">滚动到 {{ number }}</sar-button>
</template>
<script setup lang="ts">
import { random } from 'sard-uniapp'
import { ref } from 'vue'
const number = ref(random(100, 5000))
const onClick = () => {
number.value = random(100, 5000)
}
</script>vue
<template>
<sar-count-to :value="number" />
<sar-button @click="onClick">滚动到 {{ number }}</sar-button>
</template>
<script setup lang="js">
import { random } from "sard-uniapp";
import { ref } from "vue";
const number = ref(random(100, 5e3));
const onClick = () => {
number.value = random(100, 5e3);
};
</script>API
CountToProps
| 属性 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| value | 滚动到的目标数值 | number | 0 |
| precision | 精度,即小数位数 | number | 0 |
| separator | 千分位分隔符 | string | - |
| separatorDigit | 默认每三位插入一个分隔符,也可以自定义 | number | 3 |
| duration | 滚动到目标值持续时间,单位 ms | number | 2000 |