VUE----数字增加,兼容小程序

数字增加,兼容小程序

requestAnimationFrame 为浏览器提供的方法

复制代码
export function countUp(duration, from, to, onProgress) {
	let value = from
	const speed = (to - from) / duration
	const start = Date.now()

	if (typeof window === 'undefined') {
		let requestAnimationFrame = (callback) => {
			setTimeout(() => {
				callback(Date.now());
			}, 1000 / 60); // 60为大多数显示器的刷新率
		}
	}

	function _run() {
		const t = Date.now() - start
		if (t >= duration) {
			value = to
			onProgress(value)
			return
		}

		value = from + t * speed
		onProgress(value)
		requestAnimationFrame(_run)
	}

	_run()
}

使用

复制代码
countUp(2000, 0, 200, (val) => {
	console.log(val.toFixed(0))
})
相关推荐
佛系打工仔4 小时前
绘制K线第二章:背景网格绘制
android·前端·架构
计算机毕设VX:Fegn08956 小时前
计算机毕业设计|基于springboot + vue医院设备管理系统(源码+数据库+文档)
数据库·vue.js·spring boot·后端·课程设计
明天好,会的6 小时前
分形生成实验(五):人机协同破局--30万token揭示Actix-web状态管理的微妙边界
运维·服务器·前端
C_心欲无痕6 小时前
nginx - alias 和 root 的区别详解
运维·前端·nginx
北辰alk7 小时前
Vue 路由信息获取全攻略:8 种方法深度解析
vue.js
北辰alk7 小时前
Vue 三剑客:组件、插件、插槽的深度辨析
vue.js
北辰alk7 小时前
Vue Watch 立即执行:5 种初始化调用方案全解析
vue.js
北辰alk7 小时前
Vue 组件模板的 7 种定义方式:从基础到高级的完整指南
vue.js
北辰alk7 小时前
深入理解 Vue 生命周期:created 与 mounted 的核心差异与实战指南
vue.js