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))
})
相关推荐
FinClip3 分钟前
京东外卖App独立上线,超级App如何集成海量小程序?
前端
说私域5 分钟前
“开源链动2+1模式AI智能名片S2B2C商城小程序”赋能同城自媒体商家营销创新研究
人工智能·小程序·开源
一颗苹果OMG6 分钟前
随着AI的发展,测试跟prompt会不会成为每个程序员的必修课
前端·程序员·全栈
起这个名字9 分钟前
Webpack——插件实现的理解
前端·javascript·node.js
Mapmost15 分钟前
让 AI 真正看懂世界—构建具备空间理解力的智能体
前端
橙 子_31 分钟前
我本以为代码是逻辑,直到遇见了HTML的“形”与“意”【一】
前端·html
Kisang.36 分钟前
【HarmonyOS】ArkWeb——从入门到入土
前端·华为·typescript·harmonyos·鸿蒙
沉默璇年42 分钟前
tgz包批量下载脚本
前端
a***13141 小时前
python的sql解析库-sqlparse
android·前端·后端
0***R5151 小时前
前端构建工具缓存,node_modules
前端·缓存