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))
})
相关推荐
踩着两条虫10 小时前
从一行代码到一个生态:VTJ.PRO的创作之路
前端·低代码·ai编程
幼儿园技术家10 小时前
嵌套 H5 的跨端通信:iOS / Android / 小程序 / 浏览器
前端·js or ts
一只小阿乐10 小时前
TypeScript中的React开发
前端·javascript·typescript·react
用户97141718142710 小时前
vite项目开发环境启动白屏
前端
Highcharts.js10 小时前
Highcharts客户端导出使用文档说明|图表导出模块讲解
前端·javascript·pdf·highcharts·图表导出
上山打牛10 小时前
cornerstone3D 通过二进制渲染影像
前端
一只小阿乐10 小时前
react路由中使用context
前端·javascript·react.js·context 上下文
Hilaku10 小时前
一周狂揽40K+ Star⭐ 的 Pretext 到底有多变态?
前端·javascript·html
533_10 小时前
适用于vue3的拖拽插件:vue-draggable-plus, vuedraggable@next
javascript·vue.js
Southern Wind11 小时前
AI Skill Server 动态技能中台
前端·后端·mysql·node.js