Vue3 数字滚动插件 vue-countup-v3

这篇具有很好参考价值的文章主要介绍了Vue3 数字滚动插件 vue-countup-v3。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

介绍

vue-countup-v3 插件是一个基于 Vue3 的数字动画插件,用于在网站或应用程序中创建带有数字动画效果的计数器。通过该插件,我们可以轻松地实现数字的递增或递减动画,并自定义其样式和动画效果。该插件可以用于许多场景,例如展示网站页面的访问量,展示应用程序的下载量,以及展示任何需要动态展示数字的场景等。

效果

该插件支持更多的参数自定义,比如数字的样式、动画的播放方向、循环播放等等。通过这些参数,可以实现更加丰富的数字动画效果。一个简单的效果如下:

Vue3 数字滚动插件 vue-countup-v3

安装

使用该插件需要安装依赖,可以通过 npm 命令进行安装:文章来源地址https://www.toymoban.com/news/detail-511458.html

npm i vue-countup-v3

属性

属性 类型 默认值 描述
endVal Number | String - 结束值
startVal Number | String 0 起始值
duration Number 2.5 动画时长,单位:秒
decimalPlaces Number 0 小数点位数
autoplay Boolean true 是否自动计数
loop Boolean | Number false 循环次数,有限次数 / 无限循环
delay Number 0 loop 循环的间隔时间,单位:秒
options Object - 配置项

事件

时间 描述 返回值
@init CountUp 实例初始化完成触发 CountUp 实例
@finished 计数结束时触发 -

配置项

配置项 类型 默认值 描述
startVal number 0 开始数值
decimalPlaces number 0 小数点位数
duration number 2 动画时长,单位:秒
useGrouping boolean true 是否使用千位分隔符)显示
useIndianSeparators boolean false 是否使用印度数位分隔符
useEasing boolean true 是否开启数字增加过程中的缓动方式
smartEasingThreshold number 999 设置一个阈值用于调整数字计数器的动画效果
smartEasingAmount number 0.5 控制着数字变化的缓动效果
separator string , 千分位分隔符
decimal string . 小数点分隔符
easingFn number easeOutExpo 用于控制数字变化的缓动函数
formattingFn string - 用于格式化计数器的值
prefix string - 数值前缀
suffix string - 数值后缀
numerals string[] - 数字符号替换 0 - 9
enableScrollSpy boolean true 在可视范围内才开始动画
scrollSpyDelay number 50ms 目标进入可视范围内后的延迟时间(毫秒)
scrollSpyOnce boolean false 滚动到该元素时执行数字滚动动画是否执行一次
onCompleteCallback - - 回调函数,可以在计数结束时执行
plugin - - 用于替换动画效果

完整样例

<script setup lang="ts">
  import { ref } from 'vue'
  import CountUp from 'vue-countup-v3'
  import type { ICountUp, CountUpOptions } from 'vue-countup-v3'
  
  const endValueRef = ref(2022.22)
  // coutup.js options
  const options: CountUpOptions = {
    separator: '❤️'
    // ...
  }
  let countUp: ICountUp | undefined
  const onInit = (ctx: ICountUp) => {
    console.log('init', ctx)
    countUp = ctx
  }
  const onFinished = () => {
    console.log('finished')
  }
</script>

<template>
  <count-up 
    :end-val="endValueRef"
    :duration="2.5"
    :decimal-places="2"
    :options="options"
    :loop="2"
    :delay="2"
    @init="onInit"
    @finished="onFinished"></count-up>
</template>

到了这里,关于Vue3 数字滚动插件 vue-countup-v3的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • CountUp.js( 轻量级数字动画插件 )

    最近在项目开发中,发现经常会有需求要求数字有计数动画的效果。所以这里也是收集了一个非常好用的计数动画插件。给大家分享一下~ 随着可视化的发展,公司大屏可视化的项目越来愈多,而开发可视化不可避免的要用到一些数字动画之类的,下面给大家介绍一个轻量级

    2024年02月15日
    浏览(37)
  • Vue3 实现一个无缝滚动组件(支持鼠标手动滚动)

    前言 在日常开发中,经常遇到需要支持列表循环滚动展示,特别是在数据化大屏开发中,无缝滚动使用频率更为频繁,在jquery时代,我们常用的无缝滚动组件为liMarquee,在vue中已经有vue-seamless-scroll组件(通过Vue2实现,不支持鼠标手动滚动),但是在使用过程中,发现滚动后

    2024年02月08日
    浏览(50)
  • vue 数字递增(滚动从0到&)

    使用 js 封装vue模块 (需要时倒入)

    2024年02月12日
    浏览(45)
  • vue3怎么监听页面的滚动

    有的时候监听的是window的滚动,有的时候是监听元素的滚动。  我们可以先创建一个hook。useScroll.js  可以传入元素实例参数elRef,如果没有传入的话就初始化为window。 在挂载完成之后判断是否传入了元素实例elRef,如果有的话就使用元素实例,监听元素的滚动。 还需修改wi

    2024年02月12日
    浏览(39)
  • vue非插件实现列表无限循环滚动

    一、前言 最近刚好有个功能需要实现列表的无限循环滚动,在网上找到vue-seamless-scroll组件,使用起来很方便,也实现我需要的功能。我去查看了插件源码,实现原理还是比较有趣的,所以就参考了一下,自己手动实现个例子(有鼠标移入停止滚动,移出开始滚动功能)。 二

    2024年02月15日
    浏览(39)
  • 滚动条插件vue-scroll

    1)介绍 vuescroll 是一个基于 vue.js 2.X虚拟滚动条, 它支持定制滚动条的样式,检测内容尺寸变化、能够使内容分页、支持上拉-刷新,下推加载等诸多特性 (1)拥有原生滚动条的滚动行为 (2)可以定制滚动条的样式(包括颜色、尺寸、位置、透明度、是否保持显示等) (3)在模式之间

    2024年02月09日
    浏览(32)
  • 【Vue3+Ts+Vite】配置滚动条样式

    2024年02月15日
    浏览(44)
  • 【Vue3】利用VueUse实现useInfiniteScroll虚拟滚动操作

    我们先来看一下效果展示 1、infiniteScroll无限滚动是一种在网页或应用程序中实现动态加载内容的技术,它允许用户在滚动页面时无需点击分页或刷新按钮自动加载更多内容,从而提供更流畅的用户体验,传统的分页加载需要用户点击下一页或下载更多的按钮来获取更多内容,

    2024年02月01日
    浏览(58)
  • vue3 h5进入页面后自动滚动到底部

    背景: 在做h5项目中的聊天页面时,需求是进入页面自动滚到底部,方便用户看到最新消息(因为消息是正序排列的,最新消息自然展示在底部)。  直接上代码: 主要代码:

    2024年02月16日
    浏览(40)
  • vue3 锚点定位双向滚动 加v-show

    onMounted(() = { getversion()//版本数据 gettreeData()//左侧树的数据 }) // 更新日志 const conview = ref(true) const updatedata = ref() const updatelog = () = { let aparams = { versionId: versionValue.value } queryDocumentUpdateLog(aparams).then(({ data, status, message }) = { if (status == 200) { updatedata.value = data.body conview.value = fals

    2024年02月09日
    浏览(36)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包