封装的数字滚动组件的实现代码

效果:

学习啦:

Vue 是一个渐进式框架,鼓励通过组件化来构建应用,其组件化优势:

  • 代码复用:不同的视图和功能被封装成独立的组件,便于复用。
  • 易于维护:每个组件职责单一、耦合度低,便于维护和扩展。
  • 清晰的结构:应用的结构变得更清晰,逻辑拆分更加简洁。

CSS 动画与 transform:

CSS transform 属性允许你在不影响文档流的情况下对元素进行位移、缩放、旋转等操作。相比使用 margintop 等属性,transform 性能更好,因其不会触发浏览器的重排和重绘

innerHTML 的使用:

innerHTML 是 JavaScript 中用来获取或设置元素的 HTML 内容的属性。虽然它很方便,但使用时需要注意性能问题,因为它会导致页面重新渲染。

mapjoin 方法:

  • map 是数组的一个高阶方法,用于遍历数组并对每个元素应用一个函数,返回一个新的数组。应用场景:用于生成每个数字项的 HTML 代码。
  • join 方法用于将数组元素连接成一个字符串,并且可以指定分隔符,应用于将所有生成的 HTML 字符串拼接成一个长字符串

实现思路:

  1. 格式化数字:处理负数、小数点和符号。
  2. 数字转数组:拆分数字为字符,便于渲染。
  3. 创建 DOM 元素:为每个字符生成对应的滚动容器。
  4. 初始化渲染和动画:根据数字创建滚动项并启动动画。
  5. 滚动动画优化:使用 transform: translateY() 替代 margin-top,提升性能。
  6. 响应数字变化:实时更新数字和滚动效果。
  7. 样式优化:确保显示效果清晰,滚动平滑。

封装代码:

<template><div class="scroll-number-container" ref="scrollContainer"></div>
</template><script setup>
import { ref, watch, onMounted } from 'vue';const props = defineProps({number: {type: [Number, String],required: true,},duration: {type: Number,default: 500,},
});// 用于引用 DOM 元素
const scrollContainer = ref(null);// 格式化数字,支持格式化负数、小数和千位分隔符
const formatNumber = (num) => {// 数字转字符串并考虑负数if (num < 0) {return `-${Math.abs(num).toString()}`;}return num.toString();
};// 将数字字符串转为数组,支持负号和小数点
const numberToArr = (num) => {const formatted = formatNumber(num);return formatted.split('');
};// 创建每个数字的滚动效果 DOM 元素
const createScrollItem = (digit) => {if (/\d/.test(digit)) {return (`<div class="scrollItem"><div class="scrollItem-content" data-show="${digit}"><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span></div></div>`);} else {// 对于负号、小数点等非数字字符单独处理return `<div class="sign-box"><span>${digit}</span></div>`;}
};// 更新滚动动画
const animateScroll = () => {const height = scrollContainer.value.clientHeight;const scrollItems = scrollContainer.value.querySelectorAll('.scrollItem-content');scrollItems.forEach((item) => {const num = parseInt(item.getAttribute('data-show'));const translateY = height * num;item.style.transition = `transform ${props.duration}ms ease-in-out`;item.style.transform = `translateY(-${translateY}px)`;});
};// 初始化,渲染数字列表
const init = () => {const numArr = numberToArr(props.number);scrollContainer.value.innerHTML = numArr.map(createScrollItem).join('');animateScroll();
};onMounted(() => {init();
});// 监听数字变化
watch(() => props.number, init);
</script><style lang="scss">
.scroll-number-container {display: flex;height: 28px;overflow: hidden;font-size: 20px;font-weight: bold;margin: 10px;
}.scrollItem {display: flex;flex-direction: column;line-height: 28px;width: 25px;text-align: center;
}.scrollItem-content {display: flex;flex-direction: column;transition: transform 0.5s ease-in-out;
}.scrollItem-content span {font-size: 32px;font-family: 'YouSheBiaoTiHei';
}.sign-box {display: flex;align-items: center;justify-content: center;font-size: 32px;font-family: 'YouSheBiaoTiHei';
}
</style>

封装组件应用:

<template><div id="app"><h1>数字滚动效果</h1><ScrollNumber :number="currentNumber" :duration="1000" /><button @click="changeNumber">更改数字</button></div>
</template><script setup>
// 导入子组件
import ScrollNumber from './components/ScrollNumber.vue';import { ref } from 'vue';const currentNumber = ref(1234);  // 初始数字// 事件处理函数,用于更改数字
const changeNumber = () => {currentNumber.value = Math.floor(Math.random() * 10000);  // 随机生成一个数字
};
</script><style>
#app {text-align: center;margin-top: 50px;
}button {margin-top: 20px;padding: 10px 20px;font-size: 16px;cursor: pointer;
}
</style>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/467689.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Kafka面试题解答(二)

1.怎么尽可能保证 Kafka 的可靠性 kafka是可能会出现数据丢失问题的&#xff0c;Leader维护了一个动态的in-sync replica set&#xff08;ISR&#xff09;&#xff0c;意为和 Leader保持同步的FollowerLeader集合(leader&#xff1a;0&#xff0c;isr:0,1,2)。 如果Follower长…

分块——最为优雅的暴力

在信息学竞赛中&#xff0c;常常会遇到一些区间修改或区间查询的题目&#xff0c;如果直接敲暴力的话&#xff0c;时间复杂度是 O ( n m ) O(nm) O(nm) 可能会超时&#xff0c;如果写树状数组或线段树的话&#xff0c;又有一点复杂&#xff0c;不易理解&#xff0c;那么这时候…

w~视觉~合集20~SAM

我自己的原文哦~ https://blog.51cto.com/whaosoft/12500982 #SAM 今天&#xff0c;Meta发布史上首个图像分割基础模型SAM&#xff0c;将NLP领域的prompt范式引进CV&#xff0c;让模型可以通过prompt一键抠图。网友直呼&#xff1a;CV不存在了! 就在刚刚&#xff0c;Meta AI…

Halcon resistor.hedv 使用多个对焦级别提取深度

depth_from_focus * Extract depth using multiple focus levels * 使用多个对焦级别提取深度 Names : [] * 初始化一个空数组&#xff0c;用于存储图像名称 dev_close_window () * 关闭当前打开的图像窗口 for i : 1 to 10 by 1 * 循环开始&#xff0c;从1到10 …

qt QTreeWidgetItem详解

1、概述 QTreeWidgetItem 是 Qt 框架中的一个类&#xff0c;专门用于在 QTreeWidget&#xff08;一个基于项的树形视图&#xff09;中表示单个节点&#xff08;或称为项&#xff09;。QTreeWidget 继承自 QAbstractItemView&#xff0c;而 QTreeWidgetItem 则作为树中的一个节…

三.Linux用户和用户管理

前言&#xff1a;Linux系统是一个多用户多任务的分时操作系统&#xff0c;任何一个要使用资源的都必须向系统管理员申请一个账户&#xff0c;然后通过这个账户的身份进入系统。 一.此次目的 用户账号的添加、删除与修改。 用户口令的管理。 用户组的管理。 二.用户账号的添加…

SpringBoot技术栈:构建高效共享汽车系统

4系统概要设计 4.1概述 本系统采用B/S结构(Browser/Server,浏览器/服务器结构)和基于Web服务两种模式&#xff0c;是一个适用于Internet环境下的模型结构。只要用户能连上Internet,便可以在任何时间、任何地点使用。系统工作原理图如图4-1所示&#xff1a; 图4-1系统工作原理…

【笔记】扩散模型(九):Imagen 理论与实现

论文链接&#xff1a;Photorealistic Text-to-Image Diffusion Models with Deep Language Understanding 非官方实现&#xff1a;lucidrains/imagen-pytorch Imagen 是 Google Research 的文生图工作&#xff0c;这个工作并没有沿用 Stable Diffusion 的架构&#xff0c;而是级…

css:基础

前言 我们之前其实也可以写出一个看起来算是一个网页的网页&#xff0c;为什么我们还要学css&#xff1f; CSS&#xff08;Cascading Style Sheets&#xff09;也叫层叠样式表&#xff0c;是负责美化的&#xff0c;我们之前说html就是一个骨架&#xff0c;css就可以用来美化网…

[全网最细数据结构完整版]第七篇:3分钟带你吃透队列

目录 1->队列的概念及结构 2->队列的实现 2.1定义队列基本结构 struct QueueNode 和 struct Queue 2.2队列初始化函数 QueueInit 函数 2.3队列销毁函数 QueueDestroy 函数 2.4队列插入数据函数 QueuePush 函数 2.5判断队列是否为空,空返回true,非空返回false 2.6队列删…

Android笔记(三十五):用责任链模式封装一个App首页Dialog管理工具

背景 项目需要在首页弹一系列弹窗&#xff0c;每个弹窗是否弹出都有自己的策略&#xff0c;以及哪个优先弹出&#xff0c;哪个在上一个关闭后再弹出&#xff0c;为了更好管理&#xff0c;于是封装了一个Dialog管理工具 效果 整体采用责任链模块设计&#xff0c;控制优先级及弹…

掌握软件组件/单元测试中的这些术语,你就算正式入门了

上篇干货&#xff0c;和大家分享了软件测试的几个级别&#xff0c;在【组件/单元测试】当中&#xff0c;涉及不少名词术语。从之前的学员学习过程来看&#xff0c;这里比较容易出现概念混乱&#xff0c;进而导致面试过程中频频翻车&#xff0c;所以有必要在这里单独拎出来和大家…

html的week控件 获取周(星期)的第一天(周一)和最后一天(周日)

html的week控件 获取周(星期)的第一天(周一)和最后一天(周日) <input type"week" id"week" class"my-css" value"ViewBag.DefaultWeek" /><script> function PageList() { var dateStrin…

【主机游戏】艾尔登法环游戏攻略

艾尔登法环&#xff0c;作为一款备受好评但优化问题频发的游戏&#xff0c;就连马斯克都夸过 今天介绍一下这款游戏 https://pan.quark.cn/s/24760186ac0b 角色升级 在《艾尔登法环》中&#xff0c;角色升级需要找到梅琳娜。你可以在关卡前废墟的营地附近&#xff0c;风暴关…

CSS 中三角形的绘制方法详解

在网页设计领域&#xff0c;特殊形状常常能为页面增添独特的视觉效果&#xff0c;三角形便是其中之一。本文将详细介绍如何利用 CSS 绘制三角形。 一、原理阐述 CSS 中一个元素的边框分为上边框、右边框、下边框和左边框。当把一个元素的宽度和高度设为 0&#xff0c;且只让其…

虚拟机linux7.9下安装mysql

1.MySQL官网下载安装包&#xff1a; MySQL :: Download MySQL Community Server https://cdn.mysql.com/archives/mysql-5.7/mysql-5.7.39-linux-glibc2.12-x86_64.tar.gz 2.解压文件&#xff1a; #tar xvzf mysql-5.7.39-linux-glibc2.12-x86_64.tar.gz 3.移动文件&#…

负载均衡式在线oj项目开发文档(个人项目)

项目目标 需要使用的技术栈&#xff1a; 这个项目共分成三个模块第一个模块为公共的模块&#xff0c;用于解决字符串处理&#xff0c;文件操作&#xff0c;网络连接等等的问题。 第二个模块是一个编译运行的模块&#xff0c;这个模块的主要功能就是将用户的代码收集上来之后要…

MySQL数据库专栏(五)连接MySQL数据库C API篇

摘要 本篇文章主要介绍通过C语言API接口链接MySQL数据库&#xff0c;各接口功能及使用方式&#xff0c;辅助类的封装及调用实例&#xff0c;可以直接移植到项目里面使用。 目录 1、环境配置 1.1、添加头文件 1.2、添加库目录 2、接口介绍 2.1、MySql初始化及数据清理 2.1.…

PH热榜 | 2024-11-08

DevNow 是一个精简的开源技术博客项目模版&#xff0c;支持 Vercel 一键部署&#xff0c;支持评论、搜索等功能&#xff0c;欢迎大家体验。 在线预览 1. Quorini 标语&#xff1a;几分钟内设计并运行无服务器云 API 介绍&#xff1a;Quorini 提供了一套可视化的工具&#xff…

QML:Menu详细使用方法

目录 一.性质 二.作用 三.方法 四.使用 1.改变标签 2.打开本地文件 3.退出程序 4.打开Dialog 五.效果 六.代码 在 QML 中&#xff0c;Menu 是一个用于创建下拉菜单或上下文菜单的控件。它通常由多个 MenuItem 组成&#xff0c;每个 MenuItem 可以包含文本、图标和快捷…