vue手写数字滚动

最新推荐文章于 2024-06-06 09:37:31 发布

大吉大利的卦象

最新推荐文章于 2024-06-06 09:37:31 发布

阅读量161

点赞数

分类专栏： vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_44949068/article/details/129622200

版权

vue 专栏收录该内容

37 篇文章 0 订阅

订阅专栏

这篇文章展示了如何在Vue3中创建一个数字滚动效果。使用了`ref`,`reactive`,`onMounted`等核心功能，定义了一个`roll`函数来控制数字递增，并通过`start`函数设置定时器实现动态滚动到指定数值。样式部分定义了数字容器的显示样式。

摘要由CSDN通过智能技术生成

1、效果图
在这里插入图片描述
2、代码（我用的vue3写的，vue2其实也一个道理）

<template>
  <div class="nmber-animal">
    <div class="number">{{ numAnimal }}</div>
  </div>
</template>

<script setup>
  import {
      ref,
      reactive,
      onMounted,
      onBeforeUnmount
  } from 'vue'
  let numAnimal = ref(396)
  
	const roll = (total, step) => {
		let n = 0;
		return function () {
			n = (n + step) >= total ? total : (n + step);
			if (n <= total) {
				numAnimal.value = n;
			}
		}
	}
	const start = (index, step, runtime = 1000) => {
		let rolling = roll(index, step)
		runtime = (runtime >= 300) ? runtime : 1000;
    	let timer = null
		for (let i = 0; i < (index/step); i++) {
			timer = setTimeout(rolling, (runtime/index)*i*step)
		}
		clearTimeout(timer);
	}
	start(numAnimal.value, 4)
</script>

<style lang="scss" scoped>
.nmber-animal {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 200px;
  .number {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 70px 50px;
    border: 1px solid #ccc;
    border-radius: 20px;
    box-shadow: 0 10px 8px rgba(0, 0, 0, .3);
    font-size: 24px;
    font-weight: bold;
  }
}
</style>