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循环变量注册dom事件 之强大的闭包
Sep 08 Javascript
使用JavaScript检测Firefox浏览器是否启用了Firebug的代码
Dec 28 Javascript
基于JQuery的一句话搞定手风琴菜单
Sep 14 Javascript
javascript 面向对象封装与继承
Nov 27 Javascript
js判断手机和pc端选择不同执行事件的方法
Jan 30 Javascript
基于JavaScript实现快速转换文本语言(繁体中文和简体中文)
Mar 07 Javascript
Vue.js常用指令的使用小结
Jun 23 Javascript
微信小程序 按钮滑动的实现方法
Sep 27 Javascript
vue cli使用绝对路径引用图片问题的解决
Dec 06 Javascript
Vue脚手架的简单使用实例
Jul 10 Javascript
详解React 服务端渲染方案完美的解决方案
Dec 14 Javascript
解决ant Design中Select设置initialValue时的大坑
Oct 29 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下检测字符串是否是utf8编码的代码
2008/06/28 PHP
PHP 读取Postgresql中的数组
2013/04/14 PHP
php截取中文字符串不乱码的方法
2013/12/25 PHP
PHP闭包函数传参及使用外部变量的方法
2016/03/15 PHP
javascript dom 基本操作小结
2010/04/11 Javascript
textarea 控制输入字符字节数(示例代码)
2013/12/27 Javascript
深入理解js promise chain
2016/05/05 Javascript
jQuery页面加载初始化的3种方法(推荐)
2016/06/02 Javascript
js实现select选择框效果及美化
2016/08/19 Javascript
浅谈Vue的基本应用
2016/12/27 Javascript
js实现随机抽选效果、随机抽选红色球效果
2017/01/13 Javascript
js实现3d悬浮效果
2017/02/16 Javascript
JavaScript实现获取远程的html到当前页面中
2017/03/26 Javascript
webpack3之loader全解析
2017/10/26 Javascript
javaScript产生随机数的用法小结
2018/04/21 Javascript
python开发之str.format()用法实例分析
2016/02/22 Python
python安装oracle扩展及数据库连接方法
2017/02/21 Python
通过Python 获取Android设备信息的轻量级框架
2017/12/18 Python
浅谈python函数调用返回两个或多个变量的方法
2019/01/23 Python
详解python校验SQL脚本命名规则
2019/03/22 Python
python词云库wordCloud使用方法详解(解决中文乱码)
2020/02/17 Python
Canvas中设置width与height的问题浅析
2018/11/01 HTML / CSS
阿迪达斯德国官方网站:adidas德国
2017/07/12 全球购物
大都会艺术博物馆商店:The Met Store
2018/06/22 全球购物
Expedia法国:全球最大在线旅游公司
2018/09/30 全球购物
Exoticca英国:以最优惠的价格提供豪华异国情调旅行
2018/10/18 全球购物
一些PHP的面试题
2015/05/06 面试题
旅游专业职业生涯规划范文
2014/01/13 职场文书
大学社团活动策划书
2014/01/26 职场文书
公务员转正鉴定材料
2014/02/11 职场文书
人事主管岗位职责说明书
2014/07/30 职场文书
开发房地产协议书
2014/09/14 职场文书
起诉书格式范文
2015/05/20 职场文书
《灰雀》教学反思
2016/02/19 职场文书
SQL Server中常用截取字符串函数介绍
2022/03/16 SQL Server
Java基础——Map集合
2022/04/01 Java/Android