zoukankan      html  css  js  c++  java
  • 数字滚动插件-countTo的使用

    在vue项目中不可避免会涉及数字的动态滚动的效果,通常使用countTo来实现

    1:安装依赖

      npm install --save vue-count-to

    2:可以全局引用也可以在单独页面引用,因项目局限就在单独页面使用了

    1)、
        import CountTo from 'vue-count-to'
    
    2)、
        export default {
         components: {
          CountTo
         },
        }
    3:直接使用
    <count-to :start-val="0" :end-val="item.dataNum" :duration="3000"/>

    4:示例

    <template>
      <countTo :startVal='startVal' :endVal='endVal' :duration='3000'/>
    </template>
    
    <script>
      import countTo from 'vue-count-to';
      export default {
        components: { 
            countTo 
        },
        data () {
          return {
            startVal: 0,
            endVal: 3000
          }
        }
      }
    </script>    

    5:组件配置信息:

    PropertyDescriptiontypedefault
    startVal 开始值 Number 0
    endVal 结束值 Number 2017
    duration 持续时间,以毫秒为单位 Number 3000
    autoplay 自动播放 Boolean true
    decimals 要显示的小数位数 Number 0
    decimal 十进制分割 String .
    separator 分隔符 String ,
    prefix 前缀 String ''
    suffix 后缀 String ''
    useEasing 使用缓和功能 Boolean true
    easingFn 缓和回调 Function

    ** 注意:当autoplay:true时,它将在startVal或endVal更改时自动启动**

    6:功能

    Function NameDescription
    mountedCallback 挂载以后返回回调
    start 开始计数
    pause 暂停计数
    reset

    重置countTo

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

  • 相关阅读:
    html websocket
    使用公钥进行远程登录主机/远程执行命令
    cropper.js 跨域问题
    利用PhantomJS生成网站截图
    Windows下的MySQL删除data文件夹后……
    快速设置环境变量
    压缩JS时生成source_map
    调试android chrome web page简明备忘
    CURL 简介【转载】
    一些同形异码字符
  • 原文地址:https://www.cnblogs.com/liangpi/p/11824528.html
Copyright © 2011-2022 走看看