vue 使用async写数字动态加载效果案例

 更新时间:2020年07月18日 13:07:44   作者:qianyiyiyi  
这篇文章主要介绍了vue 使用async写数字动态加载效果案例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

父组件

<interval-number :number-content="blockHeight" v-if="blockHeight>0"></interval-number>
 
import IntervalNumber from './IntervalNumber.vue'
components:{
  IntervalNumber,
}

子组件

<template>
 <span class="IntervalNumber">
 {{ counter }}
 </span>
</template>
<script>
export default {
 name: 'IntervalNumber',
 props: {
  numberContent: Number
 },
 data () {
  return {
   counter: this.numberContent,
   timeTicket: null,
  }
 },
 mounted(){
  let time = 1000 //ms 数字滚动总时间
  let delayTime = 30 // ms 数字滚动间隔时间
  let divisions = time / delayTime
 
  this.asyncPrint(this.counter, divisions, delayTime)
  
 },
 methods:{
  timeOut(ms) {
   return new Promise((resolve) => {
    this.timeTicket = setTimeout(resolve, ms)
   })
  },
  async asyncPrint(value, divisions, ms){
   for(let i=0; i< divisions; i++){
    
    try {
     await this.timeOut(ms);
    } catch (err) {
     console.log(err)
    }
 
    this.counter = Math.round(value / divisions * i);
   }
   
   this.counter = this.numberContent
 
   clearTimeout(this.timeTicket)
   this.timeTicket = null
  }
 }
}
</script>

补充知识:vue利用 vue-animate-number插件动态展示数字(从0动态滚动到指定数字)

vue-animate-number插件git地址: https://github.com/wangdahoo/vue-animate-number

1.具体实现步骤如下

如果你想展示一下自己的技术,也可以用代码一行一行的写,如果你像我一样“聪明”的话,咱还是用这个插件,亲测效果不错,简单易懂!哈哈,开个玩笑!说正事!

第一步:安装vue-animate-number插件

$ npm install vue-animate-number

第二步:在main.js中引入

import Vue from 'vue'
import VueAnimateNumber from 'vue-animate-number'
Vue.use(VueAnimateNumber)

第三步:在组件中使用

把所有用到的案例都在下面组件中写出

<template>
 <div>
 
  <animate-number
   from="1" 
   to="10" 
   duration="1000" 
   easing="easeOutQuad"
   :formatter="formatter"
  ></animate-number>
  
   <!-- 最简单的案例,from是开始值,to是结束值 -->
  <animate-number from="1" to="10"></animate-number>
  
  <animate-number ref="myNum" from="0" to="10" mode="manual" :formatter="formatter"></animate-number><br>
  
   <!-- 也可以通过按钮去触发-->
  <button type="button" @click="startAnimate()"> animate! </button>
 </div>
</template>

<script>
 export default {
  methods: {
   formatter: function (num) {
    return num.toFixed(2)
   },

   startAnimate: function () {
    this.$refs.myNum.start()
   }
  }
 }
</script>

2.vue-animate-number的API

以上显示的代码以及步骤git上都有,并且也比较详细,没事大家可以浏览一下,收藏起来,用到的时候多方便!

以上这篇vue 使用async写数字动态加载效果案例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • vue.js todolist实现代码

    vue.js todolist实现代码

    这篇文章主要介绍了vue.js todolist实现代码,需要的朋友可以参考下
    2017-10-10
  • 浅谈element关于table拖拽排序问题

    浅谈element关于table拖拽排序问题

    本文主要介绍了element关于table拖拽排序问题,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-10-10
  • Vue整合AdminLTE模板的方法

    Vue整合AdminLTE模板的方法

    这篇文章主要介绍了Vue整合AdminLTE模板的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-05-05
  • vuex 解决报错this.$store.commit is not a function的方法

    vuex 解决报错this.$store.commit is not a function的方法

    这篇文章主要介绍了vuex 解决报错this.$store.commit is not a function的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-12-12
  • 浅谈Vue服务端渲染框架Nuxt的那些事

    浅谈Vue服务端渲染框架Nuxt的那些事

    这篇文章主要介绍了浅谈Vue服务端渲染框架Nuxt的那些事,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-12-12
  • mpvue将vue项目转换为小程序

    mpvue将vue项目转换为小程序

    这篇文章主要介绍了mpvue将vue项目转换为小程序的相关资料及mpvue开发流程,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-09-09
  • vue响应式Object代理对象的修改和删除属性

    vue响应式Object代理对象的修改和删除属性

    这篇文章主要为大家介绍了vue响应式Object代理对象的修改和删除属性示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-08-08
  • 一步步教你搭建VUE+VScode+elementUI开发环境

    一步步教你搭建VUE+VScode+elementUI开发环境

    这篇文章主要给大家介绍了关于搭建VUE+VScode+elementUI开发环境的相关资料,近期被配置环境的事情弄得整个人都要炸了,现在整理如下,希望有相同需求的朋友可以不用走弯路,需要的朋友可以参考下
    2023-07-07
  • Vue项目中使用addRoutes出现问题的解决方法

    Vue项目中使用addRoutes出现问题的解决方法

    大家应该都知道可以通过vue-router官方提供的一个api-->addRoutes可以实现路由添加的功能,事实上就也就实现了用户权限,这篇文章主要给大家介绍了关于Vue项目中使用addRoutes出现问题的解决方法,需要的朋友可以参考下
    2021-08-08
  • vue elementUI select下拉框如何设置默认值

    vue elementUI select下拉框如何设置默认值

    这篇文章主要介绍了vue elementUI select下拉框如何设置默认值问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10

最新评论