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))
})
相关推荐
氢灵子5 分钟前
Fixed 定位的失效问题
前端·javascript·css
haibindev24 分钟前
把近5万个源文件喂给AI之前,我先做了一件事
java·前端·c++·ai编程·代码审计·架构分析
labixiong35 分钟前
React Hooks 闭包陷阱:高级场景与深度思考
前端·javascript·react.js
掘金者阿豪1 小时前
在AI时代,没有人是“只写一行代码的人”——我们为何都在被迫成为全栈?
vue.js·后端
☞无能盖世♛逞何英雄☜1 小时前
Echarts数据可视化应用
前端·信息可视化·echarts
2501_943610361 小时前
我爱导航系统美化版源码网址导航系统带后台-【全开源】
前端·后端·html·php
__Yvan1 小时前
Kotlin 的 ?.let{} ?: run{} 真的等价于 if-else 吗?
android·开发语言·前端·kotlin
英俊潇洒美少年2 小时前
JS 事件循环(宏/微任务) ↔ Vue ↔ React** 三者的关系
javascript·vue.js·react.js
陈随易2 小时前
我也曾离猝死很近
前端·后端·程序员
烈焰飞鸟2 小时前
iconfont 在 uni-app 项目中的完整使用指南
vue.js·uni-app·iconfont