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))
})

相关推荐

  1. VUE----数字增加兼容程序

    2024-05-11 08:16:09       11 阅读
  2. 程序显示兼容处理,home键处理

    2024-05-11 08:16:09       30 阅读

最近更新

  1. Docker

    2024-05-11 08:16:09       0 阅读
  2. Vue中v-for和v-if优先级(2、3)

    2024-05-11 08:16:09       0 阅读
  3. 晚上定时编译android系统

    2024-05-11 08:16:09       1 阅读
  4. 摒弃传统分页:移动端开发中的无限滚动实现

    2024-05-11 08:16:09       1 阅读
  5. 程序人生 - (002)

    2024-05-11 08:16:09       1 阅读
  6. MacOS隐藏文件打开指南

    2024-05-11 08:16:09       1 阅读

热门阅读

  1. Android Gradle的插件

    2024-05-11 08:16:09       13 阅读
  2. sass 详解

    2024-05-11 08:16:09       11 阅读
  3. 人工智能对企业安全的影响与风险控制-内刊

    2024-05-11 08:16:09       11 阅读
  4. Oracle行锁怎么杀

    2024-05-11 08:16:09       11 阅读
  5. rviz与urdf

    2024-05-11 08:16:09       9 阅读
  6. [补题记录] StarryCoding 入门教育赛3 D.电弧陷阱

    2024-05-11 08:16:09       8 阅读
  7. 前端Vue怎么获取登录的用户名或用户id

    2024-05-11 08:16:09       12 阅读
  8. 小米poco x3 pro adbd 以root权限启动提供服务

    2024-05-11 08:16:09       10 阅读
  9. 优化学习方法,事半功倍

    2024-05-11 08:16:09       12 阅读
  10. 缓存数据库有哪些

    2024-05-11 08:16:09       8 阅读