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


Posted in Javascript onJuly 18, 2020

父组件

<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>

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

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

2.vue-animate-number的API

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

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

Javascript 相关文章推荐
javascript 不间断的图片滚动并可点击
Jan 15 Javascript
javascript中万恶的function实例分析
May 25 Javascript
js中hash和ico的关联分析
Feb 05 Javascript
JavaScript的jQuery库中ready方法的学习教程
Aug 14 Javascript
使用jquery.qrcode.min.js实现中文转化二维码
Mar 11 Javascript
javascript弹出带文字信息的提示框效果
Jul 19 Javascript
前端设计师们最常用的JS代码汇总
Sep 25 Javascript
jQuery生成假加载动画效果
Dec 01 Javascript
很棒的一组js图片轮播特效
Jan 12 Javascript
JavaScript Date对象应用实例分享
Oct 30 Javascript
vue实现表单未编辑或未保存离开弹窗提示功能
Apr 08 Javascript
Vue proxyTable配置多个接口地址,解决跨域的问题
Sep 11 Javascript
vue-router为激活的路由设置样式操作
Jul 18 #Javascript
解决Vue @submit 提交后不刷新页面问题
Jul 18 #Javascript
vue+elementui实现点击table中的单元格触发事件--弹框
Jul 18 #Javascript
vuejs element table 表格添加行,修改,单独删除行,批量删除行操作
Jul 18 #Javascript
vue element table中自定义一些input的验证操作
Jul 18 #Javascript
vue cli4.0项目引入typescript的方法
Jul 17 #Javascript
js实现省级联动(数据结构优化)
Jul 17 #Javascript
You might like
PHP基础学习小结
2011/04/17 PHP
多个PHP中文字符串截取函数
2013/11/12 PHP
PHP中date与gmdate的区别及默认时区设置
2014/05/12 PHP
Codeigniter校验ip地址的方法
2015/03/21 PHP
PHP中error_reporting()用法详解
2015/08/31 PHP
PHP pthreads v3使用中的一些坑和注意点分析
2020/02/21 PHP
YUI 读码日记之 YAHOO.lang.is*
2008/03/22 Javascript
基于jQuery的输入框在光标位置插入内容, 并选中
2011/10/29 Javascript
Jquery+asp.net后台数据传到前台js进行解析的方法
2014/05/11 Javascript
jQuery源码解读之hasClass()方法分析
2015/02/20 Javascript
javascript实现dom动态创建省市纵向列表菜单的方法
2015/05/14 Javascript
JQuery.validate在ie8下不支持的快速解决方法
2016/05/18 Javascript
使用Angular.js实现简单的购物车功能
2016/11/21 Javascript
浅谈js中几种实用的跨域方法原理详解
2016/12/02 Javascript
百度地图去掉marker覆盖物或者去掉maker的label文字方法
2018/01/26 Javascript
JS 实现缓存算法的示例(FIFO/LRU)
2018/03/20 Javascript
js canvas实现画图、滤镜效果
2018/11/27 Javascript
Vue实现点击显示不同图片的效果
2019/08/10 Javascript
用原生JS实现爱奇艺首页导航栏代码实例
2019/09/19 Javascript
js实现适配移动端的拖动效果
2020/01/13 Javascript
初学Python函数的笔记整理
2015/04/07 Python
Django中利用filter与simple_tag为前端自定义函数的实现方法
2017/06/15 Python
python机器学习理论与实战(二)决策树
2018/01/19 Python
Django Rest framework之权限的实现示例
2018/12/17 Python
Python 支付整合开发包的实现
2019/01/23 Python
用Python爬取QQ音乐评论并制成词云图的实例
2019/08/24 Python
关于tensorflow softmax函数用法解析
2020/06/30 Python
意大利和国际最佳时尚品牌:Drestige
2019/12/28 全球购物
西班牙Polo衫品牌:Polo Club
2020/08/09 全球购物
民族团结先进个人事迹材料
2014/06/02 职场文书
企业文化标语口号
2014/06/09 职场文书
赢在执行观后感
2015/06/16 职场文书
运动会入场词
2015/07/18 职场文书
2015年工商局个人工作总结
2015/07/23 职场文书
Win11如何设置右键单击显示所有选项?Win11右键单击显示所有选项设置教程
2022/04/08 数码科技
Golang 结构体数据集合
2022/04/22 Golang