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))
})
相关推荐
TechFrank6 分钟前
Shadcn/ui 重磅更新:7 个实用新组件深度解析与实战指南
前端
快乐是一切13 分钟前
PDF中的图像与外部对象
前端
前端开发呀19 分钟前
无所不能的uniapp拦截器【三】uni-app 拦截器核心流程解析
前端·javascript·微信小程序
云枫晖23 分钟前
破壁前行:深度解析前端跨域的本质与实战
前端·浏览器
文心快码BaiduComate24 分钟前
代码·创想·未来——百度文心快码创意探索Meetup来啦
前端·后端·程序员
小白640228 分钟前
前端梳理体系从常问问题去完善-框架篇(Vue2&Vue3)
前端
云和数据.ChenGuang32 分钟前
vue中构建脚手架
前端·javascript·vue.js
尘似鹤35 分钟前
微信小程序学习(六)--多媒体操作
学习·微信小程序·小程序
千与千寻酱38 分钟前
排列与组合在编程中的实现:从数学概念到代码实践
前端·python
q_19132846951 小时前
基于RuoYi框架+Mysql的汽车进销存后台管理系统
数据库·vue.js·spring boot·mysql·汽车·个人开发·若依