CountTo 数字滚动 1.0.8

手机扫码预览

23:59



---

组件名：rice-count-to

用于将数字滚动到一个目标值。1.0.8版本开始支持

平台兼容性

uni-app x

Android	iOS	鸿蒙Next	微信小程序	h5
√	√	√	√	√

基础用法

• 通过 start-val 属性设置起始值，默认为 0
• 通过 end-val 属性设置目标值，默认为 0

<rice-count-to :start-val="100" :end-val="2000"></rice-count-to>

递减滚动

当 start-val 小于 end-val 时，数值会递减滚动

<rice-count-to :start-val="2000" :end-val="0"></rice-count-to>

显示小数位

若 start-val 与 end-val 为带小数的数值，建议将 decimals 参数设置为与二者相同的小数位数，以确保数值滚动显示格式统一

<rice-count-to :start-val="9.99" :end-val="1999.99" :decimals="2"></rice-count-to>

显示千分位

通过 separator 属性可以设置千分位分隔符，默认不会显示任何千分位分隔符

<rice-count-to :start-val="9.99" :end-val="9999.99" separator="," :decimals="2"></rice-count-to>

自定义时长

通过 duration 属性可以设置滚动动画的时长，单位为 ms，默认为 1000

<rice-count-to :end-val="2000" :duration="8000"></rice-count-to>

自定义样式

• color 属性可以设置文字的颜色
• font-size 属性可以设置文字的大小
• bold 为true 时文字会加粗

<rice-count-to :end-val="2000" color="#1989fa" font-size="20px" bold></rice-count-to>

改变值

若第一次滚动结束后每次滚动都需要从初始值（startVal）开始，而非延续上次结束值（endVal），请将restart设为 true
若数据需动态更新，建议绑定 end-val 值并将 restart 设为 false，而非绑定 start-val，以确保数值滚动效果自然流畅

<rice-count-to :start-val="10" :end-val="endVal" :restart="restart"></rice-count-to>
<view class="flex">
  <rice-button type="primary" text="减少" size="small" @click="endVal-=50"></rice-button>
  <rice-button type="primary" text="增加" size="small" :custom-style="{margin:'0 8px'}" @click="endVal+=50"></rice-button>
  <rice-checkbox v-model="restart" label="从startVal开始滚动"/>
</view>

手动控制

通过 ref 可以获取到 CountTo 实例并且调用实例的方法

<rice-count-to :start-val="10" :end-val="9999" :autoplay="false" ref="countToRef" @end="onEnd"></rice-count-to>
<rice-grid :column-num="4" icon-size="28px" :custom-style="{marginTop:'16px'}">
  <rice-grid-item icon="play" text="开始" @click="start"></rice-grid-item>
  <rice-grid-item icon="pause" text="暂停" @click="pause"></rice-grid-item>
  <rice-grid-item icon="revoke" text="继续" @click="resume"></rice-grid-item>
  <rice-grid-item icon="replay" text="重置" @click="reset"></rice-grid-item>
</rice-grid>

<script setup>
  const countToRef = ref<RiceCountToComponentPublicInstance | null>(null)
  const start = () => {
    countToRef.value!.start()
  }
  const pause = () => {
    countToRef.value!.pause()
  }
  const resume = () => {
    countToRef.value!.resume()
  }
  const reset = () => {
    countToRef.value!.reset()
  }
  const onEnd = () => {
    uni.showToast({
      title: "滚动结束",
      icon: 'none'
    })
  }

</sctipt>

API

Props

属性名	类型	说明	默认值
start-val	String | Number	开始的数值，默认从0增长到endVal	0
end-val	String | Number	要滚动到的目标值	0
duration	Number	滚动到目标数值的动画时间，单位毫秒	1000
autoplay	Boolean	设置数值后是否自动开始滚动	true
restart	Boolean	若第一次滚动结束后每次滚动都需要从初始值（startVal）开始，而非延续上次结束值（endVal），请将此参数设为 true	false
decimals	Number	要显示的小数位数	-
color	String	字体颜色	-
font-size	String | Number	字体大小	16px
bold	Boolean	字体是否加粗	false
separator	String	千位分隔符	-
custom-style	Object	自定义样式	-

Event

事件名	说明	回调参数
end	滚动结束时触发	-

方法

通过 ref 可以获取到 CountTo 实例并且调用实例的方法

方法名	说明	返回值
start	开始滚动	-
pause	暂停滚动	-
resume	暂停滚动后继续滚动	-
reset	重置	-

类型定义

组件导出如下类型

const countToRef=ref<RiceCountToComponentPublicInstance|null>(null)