首页 > 其他分享 >Vue 2中实现数字滚动效果

Vue 2中实现数字滚动效果

时间:2023-03-31 19:34:44浏览次数:54  
标签:动画 Vue 滚动 数字 startCount currentVal startTime font

 

代码:

<template>
  <div class="statistics-num">
    <!-- 显示当前数字,不使用逗号分隔符 -->
    <span class="num">{{ currentVal.toString() }}</span>
     <!-- 显示当前数字,用逗号分隔符 -->
    <!-- <span class="num">{{ currentVal.toLocaleString() }}</span> -->
    <!-- 显示加号 -->
    <!-- <span class="sign">+</span> -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 目标数字
      endVal: 20000,
      // 动画持续时间(单位:毫秒)
      duration: 2000,
      // 当前数字,初始值为0
      currentVal: 0,
      // 动画开始时间
      startTime: null
    }
  },
  mounted() {
    // 在组件挂载后启动数字滚动效果
    this.startCount()
  },
  methods: {
    startCount() {
      // 使用requestAnimationFrame()方法实现动画效果
      window.requestAnimationFrame(timestamp => {
        // 如果startTime属性为空,则将当前时间赋值给它
        if (!this.startTime) this.startTime = timestamp
        // 计算当前时间与动画开始时间之间的时间差,以及时间差所占总时间的百分比
        const progress = timestamp - this.startTime
        const percentage = Math.min(progress / this.duration, 1)
        // 根据时间百分比计算当前数字,并将其赋值给currentVal属性
        this.currentVal = Math.floor(percentage * (this.endVal - 0) + 0)
        // 如果动画持续时间还没有达到,则继续循环调用startCount()方法
        if (progress < this.duration) {
          this.startCount()
        }
      })
    }
  }
}
</script>

<style>
.statistics-num {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 130px;
  background: #f3f3f3;
}

.num {
  font-size: 80px;
  font-weight: 600;
  color: #000;
  margin-right: 10px;
  transition: 1s ease-out;
}

.sign {
  font-size: 40px;
  font-weight: 600;
  color: #000;
}
</style>

源码地址:https://github.com/yusheng9/number-scrolling

 

效果:

 

标签:动画,Vue,滚动,数字,startCount,currentVal,startTime,font
From: https://www.cnblogs.com/lyso/p/17277280.html

相关文章

  • 力扣---剑指 Offer 57. 和为s的两个数字
    输入一个递增排序的数组和一个数字s,在数组中查找两个数,使得它们的和正好是s。如果有多对数字的和等于s,则输出任意一对即可。 示例1:输入:nums=[2,7,11,15],target=9输出:[2,7]或者[7,2]示例2:输入:nums=[10,26,30,31,47,60],target=40输出:[10,30]或者[30,10] 限......
  • Vue引用富文本编辑器
    1.在package.json加上并安装依赖"devDependencies":{"@jsdawn/vue3-tinymce":"^1.1.7",}2.在页面中引入importVue3Tinymcefrom"@jsdawn/vue3-tinymce";3.使用<vue3-tinymcev-model="item.blockDataObj.text":s......
  • vue 使用 导出 Excel
    import*asXLSXfrom"xlsx";exportExcel(){varwb=XLSX.utils.table_to_book(document.querySelector('#data-table2'),{raw:true});varwbout=XLSX.write(wb,{bookType:'xl......
  • vue2中使用antv/G6节点内容可滚动的ER图
    先举一个栗子: 如果不会请移步到官网的栗子,请点击查看狠人话不多,直接给大家上代码:整体代码片段<template><divid="container"style="position:relative;"></div></template><script>/*eslint-disable*/importG6from"@antv/g6";i......
  • react设置滚轮横向滚动
    1.准备importReact,{useRef,useEffect}from'react';constuseHorizontalScroll=({children,...layoutProps})=>{constelRef=useRef();useEffect(()=>{constel=elRef.current.children[0];//这个是通过ref获取被包住的需要滚动的元素......
  • vue3创建工程
    创建Vue3项目的步骤如下:安装Node.jsVue3需要依赖Node.js环境,因此需要先安装Node.js。可以从官网下载Node.js的安装包并安装,也可以使用包管理器安装,例如在Ubuntu上可以使用以下命令安装:sudoapt-getupdatesudoapt-getinstallnodejssudoapt-getinstallnpm......
  • 有度即时通统一工作门户助力政企单位开启数字化办公新模式
    为了提高办公效率,许多政企内部都会采用数套以上的办公系统平台,但这些平台相互之间都是独立的,形成了信息孤岛。政企内部人员在使用的时候需要来回切换,很容易出现信息遗漏和处理不及时的情况,阻碍了政企内部办公效率的提升。因此,不少政企迫切需要一款能够整合内部已有系统的的数字化......
  • Div滚动到头以后置顶
    1<!DOCTYPEHTML>2<html>3<head>4<metacharset="utf-8"/>5<title>Div滚动到头以后置顶</title>6</head>7<bodystyle="height:2000px;">8<divstyle="height:200px&q......
  • vue+leaflet示例:克里金插值渲染显示(附源码下载)
    demo源码运行环境以及配置运行环境:依赖Node安装环境,demo本地Node版本:14.19.1。运行工具:vscode或者其他工具。配置方式:下载demo源码,vscode打开,然后顺序执行以下命令:(1)下载demo环境依赖包命令:npmi(2)启动demo命令:npmrundev(3)打包demo命令:npmrunbuild:release示例效果......
  • Python 数字类型之 int float
    数字常量int:一般的整数,long:长整型,2.x版本需在数字后加“L”或“l”,表示长整型如100000000L;python3.x版本后不分长整型,统一为int,不可加“L”或“l”float:浮点数,1.0也为浮点数,float可强制转换为int,取整;print(type(1234))print(type(-24))print......