vue 实现数字滚动增加效果

逃离我推掉我的手 2023-06-14 04:12 3阅读 0赞

参考：[http://panjiachen.github.io/countTo/demo/][http_panjiachen.github.io_countTo_demo]

效果：

![aHR0cHM6Ly9pbWcyMDE4LmNuYmxvZ3MuY29tL2Jsb2cvMTM0NTgyNS8yMDE4MTAvMTM0NTgyNS0yMDE4MTAxNzAwMTM0NTUyMS00MTkxODkzNTUuZ2lm][]

使用vue-countTo插件

安装：npm install vue-count-to

使用：

<template>

<countTo ref='example' :startVal='startVal' :endVal='endVal' :duration='2000'></countTo>

<div v-on:click="start()">点击开始</div>

</template>

<script>  
  import countTo from 'vue-count-to';  
  export default \{  
    components: \{ countTo \},  
    data () \{  
      return \{  
        // 初始值  
        startVal: 0,  
        // 最终值  
        endVal: 100  
      \}  
    \},

methods: \{

start() \{

this.$refs.example.start();

\},

\},

\}

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTIwMTEzNjA_size_16_color_FFFFFF_t_70][]

[http_panjiachen.github.io_countTo_demo]: http://panjiachen.github.io/countTo/demo/
[aHR0cHM6Ly9pbWcyMDE4LmNuYmxvZ3MuY29tL2Jsb2cvMTM0NTgyNS8yMDE4MTAvMTM0NTgyNS0yMDE4MTAxNzAwMTM0NTUyMS00MTkxODkzNTUuZ2lm]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWcyMDE4LmNuYmxvZ3MuY29tL2Jsb2cvMTM0NTgyNS8yMDE4MTAvMTM0NTgyNS0yMDE4MTAxNzAwMTM0NTUyMS00MTkxODkzNTUuZ2lm
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTIwMTEzNjA_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/2019111811533029.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTIwMTEzNjA=,size_16,color_FFFFFF,t_70

发表评论取消回复

表情：

评论列表（有 0 条评论，3人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue 实现数字滚动增加效果

参考：[http://panjiachen.github.io/countTo/demo/][http_panjiachen.github.io_countTo_demo]

逃离我推掉我的手/ 2023年06月14日 04:12/ 0 赞/ 4 阅读

相关 vue实现文字滚动播放效果

[原博地址][Link 1]，亲测此方法有效！！！效果图： ![在这里插入图片描述][2021042615573066.gif_pic_center] 实现方式：

忘是亡心i/ 2023年01月17日 02:26/ 0 赞/ 220 阅读

相关 html实现数字滚动停留,一个简单的滚动数字的效果实现

1.效果图 ![AAffA0nNPuCLAAAAAElFTkSuQmCC][] 2.定制的属性textColor 字体颜色 textSize 字体大小 duration

冷不防/ 2022年10月06日 11:43/ 0 赞/ 180 阅读

相关实现文字滚动效果

需求：滚动文字：每隔200ms 更新一次实现步骤： 1 、将第一个p标签的文字存储下来txt

浅浅的花香味﹌/ 2022年09月11日 13:14/ 0 赞/ 265 阅读

相关 vue+elementUi——实现竖向公告滚动效果(功能实现)

最近在做电商前台页面，首屏右下角有个公告，需要实现`竖向滚动`效果。也就是个竖向的轮播。 ![在这里插入图片描述][bfba9890aa309c7427d237458aea

浅浅的花香味﹌/ 2022年08月31日 02:23/ 0 赞/ 1310 阅读

相关 vue实现图片滚动（类似走马灯效果）

上次写了一个简单的图片轮播，这个相当于在上面的一些改进。这个组件除了可以进行图片滚动外，也可以嵌入任何内容的标签进行滚动，里面用了slot进行封装。父： <tem

Myth丶恋晨/ 2022年06月14日 02:16/ 0 赞/ 618 阅读

相关 WPF数字滚动效果

和WPF数字滚动抽奖有区别，WPF数字滚动抽奖是随机的，而这里是确定的。为了系统演示，这个效果通宵加班写了整整6个小时，中间就上了次厕所。代码： Rolling

分手后的思念是犯贱/ 2022年01月05日 04:05/ 0 赞/ 327 阅读

相关 JQuery实现导航效果、新闻滚动、广告效果、横向滚动

1、导航效果 2、新闻滚动（跑马灯） 3、广告效果 4、新款上市模块横向滚动 1、导航效果 ![1333441380_1207.png][]

迷南。/ 2021年09月12日 08:42/ 0 赞/ 474 阅读

相关使用vue+better-scroll实现横向滚动效果

前言还是由于项目需要，想自己造轮子，然而限于水平问题，就此作罢。于是寻找相关插件，最后发现了[better-scroll][]这个好插件，不过在使用的时候依然遇到了一些问题

客官°小女子只卖身不卖艺/ 2021年07月25日 15:32/ 0 赞/ 532 阅读

相关 jQuery数字滚动展示效果

地址： http://www.helloweba.com/view-blog-217.html HTML 我们首先载入jQuery库文件和动画背景插件：ani

向右看齐/ 2021年06月24日 13:59/ 0 赞/ 527 阅读