更新记录

1.0.1（2026-03-01） 下载此版本

• 修改配置

1.0.0（2026-03-01） 下载此版本

• 支持整数、小数、百分比等多种格式
• 支持自定义缓动函数（linear, easeIn, easeOut, easeInOut 等）
• 支持千分位分隔符
• 支持自定义前缀、后缀、颜色
• 使用 requestAnimationFrame 实现流畅动画
• 支持动态数值更新
• 支持循环动画模式
• 支持延迟启动
• 支持手动控制（start/pause/reset）
• 支持动画事件监听（start/update/end）

平台兼容性

uni-app(3.6.17)

uni-app x(3.6.17)

s-count-to 数字滚动动画组件

一个轻量级、高性能的数字滚动动画组件，让数据展示更加生动有趣

✨ 特性

• 🎯 简单易用 - 开箱即用，API 简洁明了
• ⚡️ 性能优异 - 使用 requestAnimationFrame，流畅丝滑
• 🎨 高度可定制 - 支持自定义缓动函数、颜色、前缀后缀等
• 🔢 多种格式 - 支持整数、小数、百分比、千分位分隔符
• 📱 全平台兼容 - 完美适配 H5、小程序、App 等各平台
• 🔄 动态更新 - 支持数值变化时自动重新动画
• 🎬 循环模式 - 支持动画循环播放

📦 安装

直接将 uni_modules/s-count-to 目录复制到项目的 uni_modules 目录下即可。

🚀 快速开始

<template>
  <view class="container">
    <!-- 基础用法 -->
    <s-count-to :toValue="2024" />

    <!-- 小数 -->
    <s-count-to :toValue="99.99" :decimals="2" />

    <!-- 百分比 -->
    <s-count-to :toValue="88.88" :decimals="2" suffix="%" />

    <!-- 千分位 -->
    <s-count-to :toValue="1234567" :thousandsSeparator="true" />
  </view>
</template>

<script setup>
import { ref } from 'vue'
</script>

📖 API

Props

缓动函数类型

• linear - 线性匀速
• easeIn - 加速
• easeOut - 减速
• easeInOut - 先加速后减速（默认）
• easeOutCubic - 三次方减速
• easeOutQuart - 四次方减速
• easeOutQuint - 五次方减速

Events

Methods（通过 ref 调用）

💡 使用示例

基础用法

<s-count-to :toValue="2024" />

设置小数位数

<s-count-to :toValue="99.99" :decimals="2" />

百分比显示

<s-count-to :toValue="88.88" :decimals="2" suffix="%" color="#18bc37" />

千分位分隔符

<s-count-to
  :toValue="1234567"
  :thousandsSeparator="true"
  suffix="元"
/>

自定义前缀和后缀

<s-count-to
  :toValue="2024"
  prefix="¥ "
  suffix=".00"
  color="#E67E22"
/>

控制动画时长和缓动

<s-count-to
  :toValue="1000"
  :duration="2000"
  easingFn="easeOutQuart"
/>

延迟启动

<s-count-to
  :toValue="2024"
  :delay="1000"
/>

循环动画

<s-count-to
  :toValue="100"
  :loop="true"
/>

动态更新数值

<template>
  <s-count-to :toValue="count" ref="countToRef" />
  <button @click="updateCount">更新数值</button>
</template>

<script setup>
import { ref } from 'vue'

const count = ref(1000)
const countToRef = ref()

function updateCount() {
  count.value += 500
}
</script>

手动控制动画

<template>
  <s-count-to
    :toValue="2024"
    :autoplay="false"
    ref="countToRef"
  />
  <button @click="start">开始</button>
  <button @click="pause">暂停</button>
  <button @click="reset">重置</button>
</template>

<script setup>
import { ref } from 'vue'

const countToRef = ref()

function start() {
  countToRef.value.start()
}

function pause() {
  countToRef.value.pause()
}

function reset() {
  countToRef.value.reset()
}
</script>

监听动画事件

<s-count-to
  :toValue="2024"
  @start="handleStart"
  @update="handleUpdate"
  @end="handleEnd"
/>

🎨 应用场景

• 📊 数据大屏 - 各类数据指标展示
• 💰 金融应用 - 金额、收益率变化
• 📈 统计报表 - 销售额、用户增长等
• 🏆 排行榜 - 分数、排名变化
• 🎮 游戏应用 - 积分、金币获取动画
• 🛒 电商应用 - 价格、销量展示

🔨 常见问题

Q: 为什么动画不流畅？

A: 确保使用 requestAnimationFrame，组件已内置支持。如果在低端设备上，可适当增加 duration。

Q: 如何显示货币格式？

A: 使用 prefix 和 thousandsSeparator 配合：

<s-count-to
  :toValue="12345.67"
  :decimals="2"
  prefix="¥ "
  :thousandsSeparator="true"
/>

Q: 小程序中不显示怎么办？

A: 确保已正确引入组件，部分小程序平台可能需要在 pages.json 中配置 easycom。

📝 更新日志

1.0.0 (2024-03-01)

• 🎉 首次发布
• ✨ 支持数字滚动动画
• 🎨 支持多种格式和自定义样式
• 📱 全平台兼容

📄 许可证

MIT License

如果觉得有用，请给个 ⭐️Star 支持一下！