• 数字动画效果:countup.js和vuecountupjs的使用 吴小明


    一、countup.js

    1、下载

      npm i countup.js@1.9.3  (最新版本的有问题)

    2、DOM

        <div class="num-wrapper">
          <span ref="countupRef" v-for="item in numList" :key="item">{{item}}</span>
        </div>

      css:

      .num-wrapper {
        > span {
          padding: 10px;
          display: inline-block;
          background-color: rgba(red, 0.5);
          margin-right: 10px;
          font-family: 'digital';
          font-size: 28px;
        }
      }

    3、引入和使用

    import CountUp from 'countup.js'
    export default {
      data() {
        return { numList: [7539810.1493, 7087961, 1010452, 5163393] }
      },
      methods: {
        initCountUp() {
          // 在created中执行函数时需要通过nextTick拿到最新的DOM
          this.$nextTick(() => {
            const countupLength = this.$refs.countupRef.length
            let animal = null
            for (let i = 0; i < countupLength; i++) {
              animal = new CountUp(
                this.$refs.countupRef[i], // 目标元素
                0, // 开始值
                this.$refs.countupRef[i].innerText, // 结束值
                2, // 小数位数
                1.5 // 动画时间
              )
              animal.start()
            }
          })
        }
      },
      created() {
        this.initCountUp()
      }

    4、效果:

      

    二、vue-countupjs

    1、下载

      npm i vue-countupjs

    2、引入并注册

    import VueCountUp from 'vue-countupjs'
      components: { VueCountUp }

    3、使用

        <VueCountUp :start-value="0" :end-value="100" />
  • 相关阅读:
    数据库连接池的最小连接为什么是Idle语义
    mybatis多个参数不加@Param
    uboot中使用延迟函数
    uboot中linker list数据结构
    Linux内核启动流程
    安卓系统出现时间强制设置为固件编译时间的问题
    MMC/SD卡介绍
    蓝牙博文记录
    混合编程杂谈
    转载:互联网协议入门
  • 原文地址:https://www.cnblogs.com/wuqilang/p/15750675.html
Copyright © 2020-2023  润新知