数字滚动动画的实现

发布于:2022-11-27 ⋅ 阅读:(266) ⋅ 点赞:(0)

参考:https://www.npmjs.com/package/vue-count-to

Example:


npm install vue-count-to


<template>
  <countTo :startVal='startVal' :endVal='endVal' :duration='3000'></countTo>
</template>
 
<script>
  import countTo from 'vue-count-to';
  export default {
    components: { countTo },
    data () {
      return {
        startVal: 0,
        endVal: 2017
      }
    }
  }
</script>
  <div class="check-item-num">
      <countTo separator="" :endVal="ytItem.jianse?ytItem.jianse.industryCount:'--'" />                    
      <span class="unit">个</span>
  </div>

 

Options

Property Description type default
startVal the value you want to begin at Number 0
endVal the value you want to arrive at Number 2017
duration duration in millisecond Number 3000
autoplay when mounted autoplay Boolean true
decimals the number of decimal places to show Number 0
decimal the split decimal String .
separator the separator String ,
prefix the prefix String ''
suffix the suffix String ''
useEasing is use easing function Boolean true
easingFn the easing function Function

** notes: when autoplay:true , it will auto start when startVal or endVal change **

Functions

Function Name Description
mountedCallback when mounted will emit mountedCallback
start start the countTo
pause pause the countTo
reset reset the countTo
本文含有隐藏内容,请 开通VIP 后查看

网站公告

今日签到

点亮在社区的每一天
去签到