Vue实现数字翻牌器效果

<template><div><div class="head" @click="this.numFun(0,5000)">点击金额变动</div><div>{{amount}}</div></div>
</<template><script>
export default {data () {return {amount: 0}
}
methods: {//金额变动动画numFun(startNum,maxNum) {var that = thislet numText = startNum;let golb; // 为了清除requestAnimationFramefunction numSlideFun(){ // 数字动画numText+=5; // 速度的计算可以为小数 。数字越大，滚动越快if(numText >= maxNum){numText = maxNum;cancelAnimationFrame(golb);}else {golb = requestAnimationFrame(numSlideFun);}that.amount=numText// console.log(numText)}numSlideFun(); // 调用数字动画}}
}

注意：当然vue是一个成熟的孩纸了，也有了属于它的对应的插件vue-count-to：https://www.npmjs.com/package/vue-count-to

Vue实现数字翻牌器效果相关推荐

封装vue版数字翻牌器
封装vue版数字翻牌器 <template> <div class="number"> <ul id="dataNums"> ...
封装一个layui组件---js实现数字翻牌器效果
封装一个layui组件-js实现数字翻牌器效果 layui.define(["jquery"], function (exports) {var $ = layui.jquery; ...
vue实现数字翻牌器组建，能够正常显示负数符号
先看一下效果图: 代码如下: 首先建立countFlop.vue文件,作为组建. <template><div class="count-flop" :key=& ...
Vue大屏实战一：数字翻牌器的实现
文章目录 1.效果预览 2.数字翻牌器的实现 3.vue项目中引入DataV 4.大屏顶部翻牌器布局 5.大屏数字翻牌器样式 6.大屏数字翻牌器逻辑实现 1.效果预览页面整体效果如下顶部的数字翻牌 ...
大数据可视化——dataV，Echarts，蚂蚁金服L7世界地图引入，数字翻牌器，全屏，自定义排名轮播表
目录 L7相关概念构造函数Scene PointLayer 基本用法 shape 类型 style tips 地图事件 Popup信息框 option 方法:setLnglat 方法:setDOMC ...
基于vue3 + ts 开发的数字翻牌器组件
写了两个组件,一个是DigitalFlop.vue,一个是DigitalItem.vue DigitalFlop.vue 的代码如下: <template><div class=&q ...
【前端3分钟】写一个数字翻牌器
在做效果的时候,想要表现一个数字数据的动态变化,例如金额增加,此时我们就可以使用数字翻牌器来表现.当然,你也可以使用其他效果来表现. 下面我们就来实现,注意一点: 数字的增加 <!DOCTYPE ...
大屏可视化数据面板分格渐变进度条、数字翻牌器及其刷新动效实现
数据可视化大屏是当前可视化领域的一项热门应用,通常可以分为信息展示类.数据分析类及监控预警类.这类应用的视觉设计通常效果炫酷,动效丰富,有时候一些页面布局和动画实现会对前端人员有一定的挑战性,在这里分 ...
DataV 数字翻牌器组件 dv-digital-flop 数字0不显示问题解决
问题: 在项目上线时我们会为了减少项目体积选择使用cdn链接将项目中用到的组件插件从打包的结构中剔除,在最近的项目中发现 DataV组件库出现了问题,使用cdn链接时出现,数字翻牌器组件当confi ...

Vue实现数字翻牌器效果

Vue实现数字翻牌器效果相关推荐

最新文章

热门文章