TuniaoUI

# CountTo 数字跳转

该组件一般用于需要滚动数字到某一个值的场景，目标要求是一个递增的值。

# 平台差异说明

App H5 微信小程序 支付宝小程序 百度小程序 头条小程序 QQ小程序
√ √ √ 兼容中 兼容中 兼容中 兼容中

# 基本使用

通过startVal设置开始值，endVal设置结束值。

<tn-count-to :startVal="0" :endVal="100"></tn-count-to>

# 设置是否显示小数位

通过decimals设置显示的小数位，如果设置了，在滚动过程中，小数位会一起变化。如果startVal和endVal是带小数的，应该设置decimals为 startVal和endVal一样的小数位数值。

<tn-count-to :startVal="0" :endVal="100.88" :decimals="2"></tn-count-to>

# 设置千分位分隔符

通过thousandthsSeparator配置千分位分隔符，默认为空字符串，可以设置英文逗号","，此参数表现为endVal值超过1000时，比如为"1257"，那么滚动后会变成"1,257"。

<tn-count-to :startVal="0" :endVal="1257" thousandthsSeparator=","></tn-count-to>

# 执行滚动时机

通过autoplay配置倒计时是否在组件的mounted生命周期进行初始化，如果设置autoplay为false，就需要手动通过 ref的形式通知组件开始执行，调用的是组件内部的start()和paused() 方法来开始或暂停。

<template>
  <tn-count-to ref="countTo" :endVal="endVal" :autoplay="false"></tn-count-to>
</template>

<script>
  export default {
    data() {
      return {
        endVal: 1234.56,
      };
    },
    methods: {
      start() {
        this.$refs.countTo.start();
      },
      paused() {
        this.$refs.countTo.paused();
      },
      reStart() {
        this.$refs.countTo.reStart();
      },
    }
  }
</script>

# API

# Props

属性名 说明 类型 默认值 可选值
startVal 滚动开始值 Number 0 -
endVal 滚动目标值 Number 0 -
autoplay 自定开始滚动 Boolean true false
fontColor 字体颜色 String #080808 颜色的十六进制值，rgba(),rgb(),TuniaoUI内置的颜色类名
fontSize 字体大小 Number 50 -
fontUnit 字体大小的单位 String rpx -
duration 滚动到目标值持续的时间，单位ms Number 2000 -
useEasing 在滚动到目标值的时候使用缓动效果 Boolean true false
decimals 显示小数的位数 Number 0 -
decimalSeparator 小数的分隔符 String . -
thousandthsSeparator 千分位的分隔符 String - -
bold 字体加粗 Boolean false true

# Slots

none

# Methods

需要通过ref手动调用。

名称 说明
start 开始执行滚动
reStart 重新开始执行滚动
paused 暂停滚动

# Event

事件名称 说明 回调参数
end 滚动结束 -

← CountScroll 数字滚动 →