xtf-count-to

组件说明

xtf-count-to 是数字动画组件，用于数值从起始值到目标值的动画过渡。支持缓动函数、千分位格式化、小数位、前后缀和自动播放，适用于数据大屏、统计卡片和金额展示等场景。

基础用法

1. 最简示例

通过 end 设置目标值，默认从 0 动画到目标值：

vue

<template>
  <xtf-count-to :end="8888" :duration="2000" />
</template>

2. 前后缀与格式化

通过 prefix / suffix 设置前后缀，通过 decimals 设置小数位，通过 separator 设置千分位分隔符：

vue

<template>
  <view style="display: flex; gap: 32rpx; flex-wrap: wrap">
    <view>
      <xtf-count-to :end="12899.5" prefix="¥" :decimals="2" :duration="1500" />
    </view>
    <view>
      <xtf-count-to :end="98.6" suffix="%" :decimals="1" :duration="1200" />
    </view>
    <view>
      <xtf-count-to :end="1000000" separator="," :duration="2000" />
    </view>
  </view>
</template>

3. 缓动函数

通过 easing 切换缓动函数，通过 useEasing 关闭缓动：

vue

<template>
  <view style="display: flex; flex-direction: column; gap: 16rpx">
    <view>
      <xtf-text level="caption" color="secondary">easeOutExpo（默认）</xtf-text>
      <xtf-count-to :end="5000" :duration="2000" use-easing easing="easeOutExpo" />
    </view>
    <view>
      <xtf-text level="caption" color="secondary">linear</xtf-text>
      <xtf-count-to :end="5000" :duration="2000" use-easing easing="linear" />
    </view>
    <view>
      <xtf-text level="caption" color="secondary">无缓动</xtf-text>
      <xtf-count-to :end="5000" :duration="2000" :use-easing="false" />
    </view>
  </view>
</template>

4. 手动控制

通过 autoplay 关闭自动播放，通过方法手动触发：

vue

<template>
  <view>
    <xtf-count-to ref="countTo" :end="9999" :duration="2000" :autoplay="false" />
    <xtf-button-group :gap="12" style="margin-top: 16rpx">
      <xtf-button label="开始" size="sm" @click="$refs.countTo.start()" />
      <xtf-button label="停止" size="sm" type="light" @click="$refs.countTo.stop()" />
      <xtf-button
        label="重置"
        size="sm"
        type="light"
        theme="danger"
        @click="$refs.countTo.reset()"
      />
    </xtf-button-group>
  </view>
</template>

全部属性

属性	类型	默认值	作用描述	适用范围
`end`	`Number`	`0`	目标数值	目标值
`start`	`Number`	`0`	起始数值	起始值
`duration`	`Number \| String`	`2000`	动画时长（ms）	动画速度
`decimals`	`Number`	`0`	小数位数	小数位
`separator`	`String`	`','`	千分位分隔符，空字符串不显示	千分位
`decimal`	`String`	`'.'`	小数点符号	小数点
`prefix`	`String`	`''`	前缀文字	前缀
`suffix`	`String`	`''`	后缀文字	后缀
`autoplay`	`Boolean`	`true`	是否自动播放	自动播放
`useEasing`	`Boolean`	`true`	是否使用缓动函数	缓动开关
`easing`	`String`	`'easeOutExpo'`	缓动函数：`'easeOutExpo'` / `'easeOutCubic'` / `'easeOutQuart'` / `'easeInOutCubic'` / `'linear'`	缓动类型
`color`	`String`	`''`	文字颜色	自定义颜色
`size`	`String \| Number`	`''`	字体大小（rpx）	字体大小
`bold`	`Boolean`	`false`	是否加粗	加粗
`align`	`String`	`'left'`	对齐方式：`'left'` / `'center'` / `'right'`	对齐
`lineHeight`	`String \| Number`	`''`	行高（rpx）	行高
`customClass`	`String`	`''`	自定义类名	样式覆盖
`customStyle`	`String \| Object`	`''`	自定义样式	动态样式覆盖

事件

事件名称	触发时机	回调参数	参数说明
`mounted`	组件挂载完成时触发	-	-
`finished`	动画播放完成时触发	`(value: Number)`	最终目标值
`change`	动画数值变更时触发	`(value: Number)`	当前数值

事件使用示例

vue

<template>
  <xtf-count-to
    :end="120"
    :duration="600"
    @mounted="onMounted"
    @change="onChange"
    @finished="onFinished"
  />
</template>

<script>
export default {
  methods: {
    onMounted() {
      console.log('计数器已挂载')
    },
    onChange(value) {
      console.log('当前值', value)
    },
    onFinished(value) {
      uni.showToast({ title: '完成：' + value, icon: 'none' })
    }
  }
}
</script>

方法

方法名	参数	返回值	说明
`start`	-	-	开始动画
`stop`	-	-	停止动画并保留当前值
`reset`	-	-	重置到起始值
`update`	`(endValue)`	-	更新目标值并重新动画

主题说明

文字颜色通过 color 属性控制，支持主题变量
字体大小通过 size 属性控制
加粗通过 bold 属性控制

如需全局调整主题，请在 xtf-config-provider 或主题配置中覆盖相关 CSS 变量。

xtf-count-to ​

组件说明 ​

基础用法 ​

1. 最简示例 ​

2. 前后缀与格式化 ​

3. 缓动函数 ​

4. 手动控制 ​

全部属性 ​

事件 ​

事件使用示例 ​

方法 ​

主题说明 ​