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))
})
相关推荐
盛夏绽放2 小时前
jQuery 知识点复习总览
前端·javascript·jquery
CRMEB定制开发3 小时前
CRMEB私域电商系统后台开发实战:小程序配置全流程解析
小程序·开源软件·小程序商城·商城源码·微信商城·crmeb
胡gh4 小时前
依旧性能优化,如何在浅比较上做文章,memo 满天飞,谁在裸奔?
前端·react.js·面试
大怪v5 小时前
超赞👍!优秀前端佬的电子布洛芬技术网站!
前端·javascript·vue.js
胡gh5 小时前
你一般用哪些状态管理库?别担心,Zustand和Redux就能说个10分钟
前端·面试·node.js
老华带你飞6 小时前
校园交友|基于SprinBoot+vue的校园交友网站(源码+数据库+文档)
java·数据库·vue.js·spring boot·论文·毕设·校园交友网站
roamingcode6 小时前
Claude Code NPM 包发布命令
前端·npm·node.js·claude·自定义指令·claude code
码哥DFS6 小时前
NPM模块化总结
前端·javascript
2501_915106327 小时前
iOS混淆工具实战 金融支付类 App 的安全防护与合规落地
android·ios·小程序·https·uni-app·iphone·webview
灵感__idea7 小时前
JavaScript高级程序设计(第5版):代码整洁之道
前端·javascript·程序员