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))
})
相关推荐
P***253931 分钟前
前端构建工具缓存清理,npm cache与yarn cache
前端·缓存·npm
好奇的菜鸟33 分钟前
解决 npm 依赖版本冲突:从 “unable to resolve dependency tree“ 到依赖管理高手
前端·npm·node.js
lcc18738 分钟前
Vue 内置指令
前端·vue.js
lijun_xiao20091 小时前
前端React18入门到实战
前端
o***Z4481 小时前
前端响应式设计资源,框架+模板
前端
IT_陈寒2 小时前
Vue 3.4 正式发布:5个不可错过的性能优化与Composition API新特性
前端·人工智能·后端
N***73852 小时前
前端无障碍开发资源,WCAG指南与工具
前端
2501_915106322 小时前
iOS性能调优的系统化实践,从架构分层到多工具协同的全流程优化指南(开发者深度版)
android·ios·小程序·架构·uni-app·iphone·webview
我有一棵树2 小时前
深入理解html 加载、解析、渲染和 DOMContentLoaded、onload事件
前端·性能优化·html
JIngJaneIL2 小时前
就业|高校就业|基于ssm+vue的高校就业信息系统的设计与实现(源码+数据库+文档)
java·前端·数据库·vue.js·spring boot·毕设·高校就业