【大前端vue:组件】vue鼠标滑动:平滑滚动效果 向左、向右

【大前端vue:组件】vue鼠标滑动:平滑滚动效果 向左、向右
在这里插入图片描述


<template><div class="tab-container"><div class="tab-wrapper"><h2 class="main-title">鼠标滑动:平滑滚动效果  向左、向右</h2><div class="tab-nav"><divv-for="(item, index) in tabList":key="index"class="tab-item":class="{ active: currentIndex === index }"@click="handleTabClick(index)">{{ item.name }}</div><!-- 滑动的下划线 --><divclass="sliding-line":style="{transform: `translateX(${currentIndex * 100}%)`,width: `${100 / tabList.length}%`,}"><div class="sliding-line-line"></div></div></div></div></div>
</template><script>
export default {name: "HuadongIndex",data() {return {currentIndex: 0,tabList: [{ name: "类型1", id: 1 },{ name: "类型2", id: 2 },{ name: "类型3", id: 3 },],};},methods: {handleTabClick(index) {this.currentIndex = index;},},
};
</script><style scoped>
.tab-container {width: 100%;background-color: #f5f9ff;padding: 40px 0;
}.tab-wrapper {width: 1200px;margin: 0 auto;background-color: #fff;padding: 30px;border-radius: 8px;display: flex;flex-direction: column;align-items: center;
}.main-title {text-align: center;font-size: 28px;color: #333;margin-bottom: 40px;
}.tab-nav {display: flex;justify-content: center;position: relative;padding-bottom: 2px;width: 900px;height: 50px;background: #ccc;align-items: center;
}.tab-item {position: relative;padding: 0 40px;height: 50px;font-size: 16px;color: #666;cursor: pointer;transition: color 0.3s;text-align: center;flex: 1;width: 200px;background: pink;border: 1px solid red;display: flex;align-items: center;justify-content: center;
}.tab-item.active {color: #1890ff;font-weight: 500;
}.sliding-line {position: absolute;bottom: -2px;left: 0;height: 2px;/* background-color: #1890ff; */transition: transform 0.3s ease;border-radius: 1px;width: 100px;display: flex;align-items: center;justify-content: center;
}
.sliding-line-line {height: 2px;width: 221px;background-color: red;
}/* 鼠标悬停效果 */
.tab-item:hover {color: #1890ff;
}
</style>```

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

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

相关文章

某养老产业公司管理诊断项目成功案例纪实

某养老产业公司管理诊断项目成功案例纪实 ——从短期和长期出发&#xff0c;提供转型改革建议 【客户行业】养老行业 【问题类型】问题诊断 【客户背景】 某养老产业公司是一家主要从事养老服务为主的企业&#xff0c;主营业务包括社区养老服务、居家养老、康复训练服务等…

什么叫中间件服务器?

什么叫中间件服务器&#xff1f;它在软件架构中扮演着怎样的角色&#xff1f;在现代应用程序开发中&#xff0c;中间件服务器的概念很多人对它并不太熟悉&#xff0c;但其实它的作用却不小。 中间件服务器是一种连接不同软件应用程序的中介。想象一下&#xff0c;在一个大型企…

牛客周赛71(字符串,状压dp)

目录 B. 宝石手串 D. 气球谜题 B. 宝石手串 &#xff08;1&#xff09;两种扩容方式&#xff1a; // 法一&#xff1a;直接加&#xff08;通常用于拼接字符串&#xff09;s s// 法二&#xff1a;一个一个字符加&#xff08;用于加单个字符&#xff09;for (…

Python的3D可视化库【vedo】1-4 (visual模块) 体素可视化、光照控制、Actor2D对象

文章目录 6. VolumeVisual6.1 关于体素6.2 显示效果6.2.1 遮蔽6.2.2 木纹或磨砂效果 6.3 颜色和透明度6.3.1 透明度衰减单位6.3.2 划分透明度标量梯度6.3.3 设置颜色或渐变6.3.4 标量的计算模式6.3.5 标量的插值方式 6.4 过滤6.4.1 按单元格id隐藏单元格6.4.2 按二进制矩阵设置…

DAY5 C++运算符重载

1.类实现> 、<、!、||、&#xff01;和后自增、前自减、后自减运算符的重载 代码&#xff1a; #include <iostream>using namespace std; class Complex {int rel;int vir; public:Complex(){};Complex(int rel,int vir):rel(rel),vir(vir){cout << "…

qt 封装 调用 dll

这个目录下 &#xff0c;第一个收藏的这个 &#xff0c;可以用&#xff0c; 但是有几个地方要注意 第一.需要将dll的头文件添加到qt的文件夹里面 第二&#xff0c;需要在pro文件里面添加动态库路径 第三&#xff0c;如果调用dll失败&#xff0c;那么大概需要将dll文件放在e…

hbuilder 安卓app手机调试中基座如何设置

app端使用基座 手机在线预览功能 1.点击运行 2.点击运行到手机或者模拟器 3.制作自定义调试基座 4.先生成证书【可以看我上一篇文档写的有】&#xff0c;点击打包 5.打包出android自定义调试基座【android_debug.apk】,【就跟app打包一样需要等个几分钟】 6.点击运行到手…

快速将请求头构建成json结构

1.背景 有时候我们要爬虫(组包)请求一个资源数据,需要构建与原始请求一样的请求头,从浏览器复制过来的请求头,有很多,如果一个一个的配置成json有点慢,那么如何快速构建呢? 今天就使用正则表达式的方式实现 正则表达式实现快速将请求头构建成json结构 将冒号后边的换行符去掉…

k8s调度策略

调度策略 binpack&#xff08;装箱策略&#xff09; Binpacking策略&#xff08;又称装箱问题&#xff09;是一种优化算法&#xff0c;用于将物品有效地放入容器&#xff08;或“箱子”&#xff09;中&#xff0c;使得所使用的容器数量最少&#xff0c;Kubernetes等集群管理系…

uniapp支持App横竖屏开发总结

一、需求&#xff1a; app要支持重力感应自动切换横竖屏&#xff0c;并切换后样式不能错乱 二、实现 官方文档 官方Git manifest.json文件中 "app-plus" : {"screenOrientation" : ["portrait-primary","portrait-secondary","…

Flink如何基于数据版本使用最新离线数据

业务场景 假设批量有一张商户表&#xff0c;表字段中有商户名称和商户分类两个字段。 批量需要将最新的商户名称和分类的映射关系推到hbase供实时使用。 原实现方案 a.原方案内容 为解决批量晚批问题&#xff0c;批量推送hbase表时一份数据产生两类rowkey&#xff1a;T-1和…

在 Spring Boot 项目中使用 Thymeleaf 时,通常情况下,你需要配置热加载(Hot Reload)来在开发过程中更快速地看到页面的变化。

配置步骤&#xff1a; 1. 添加 DevTools 依赖 在 pom.xml 中添加 spring-boot-devtools 依赖。DevTools 提供了自动重启、LiveReload、模板热加载等功能。 <dependencies><!-- Spring Boot DevTools (用于热加载) --><dependency><groupId>org.spri…

基于事件驱动的websocket简单实现

websocket的实现 什么是websocket&#xff1f; WebSocket 是一种网络通信协议&#xff0c;旨在为客户端和服务器之间提供全双工、实时的通信通道。它是在 HTML5 规范中引入的&#xff0c;可以让浏览器与服务器进行持久化连接&#xff0c;以便实现低延迟的数据交换。 WebSock…

F5-TTS文本语音合成模型的使用和接口封装

F5-TTS文本语音生成模型 1. F5-TTS的简介 2024年10月8日&#xff0c;上海交通大学团队发布&#xff0c;F5-TTS (A Fairytaler that Fakes Fluent and Faithful Speech with Flow Matching) 是一款基于扩散Transformer和ConvNeXt V2的文本转语音 (TTS) 模型。F5-TTS旨在生成流…

elementui table子级tree懒加载bug

1. 删除子级刷新列表子级依然显示 2.更新状态子级列表未刷新 3.编辑子级后刷新页面显示状态未变更 el-table 树表格load源码 首先&#xff0c;load可以执行&#xff0c;但是只剩一个子节点就有问题&#xff0c;那么就直接可以定位bug在load方法里&#xff1a; 文件路径&am…

SQL语句错误号:Incorrect integer value: ‘‘ for column ‘poi_id‘ at

SQL语句错误号&#xff1a;Incorrect integer value: for column poi_id at通用解决方案 在MySQL 5.7中&#xff0c;如果你遇到 Incorrect integer value: for column poi_id at row 1 错误&#xff0c;这通常意味着你尝试将一个空字符串插入到需要整数值的字段中。以下是几…

在springBoot项目如何对本地配置文件和云服务配置文件独立配置

springBoot中配置文件本地和云服务配置文件独立配置 1.首先我们创建好一个springBoot项目后&#xff0c;需要再创建两个application.yml配置文件&#xff0c;如图 2.然后在各自的配置文件中配置各自环境的信息&#xff0c;注意的是在创建各自环境的yml文件时&#xff0c;必须…

【分布式事务】二、NET8分布式事务实践: DotNetCore.CAP 框架(本地消息表) 、 消息队列(RabbitMQ)、 多类型数据库(MySql、MongoDB)

介绍 DotNetCore.CAP简称CAP, [CAP]是一个用来解决微服务或者分布式系统中分布式事务问题的一个开源项目解决方案, 同样可以用来作为 EventBus 使用,CAP 拥有自己的特色,它不要求使用者发送消息或者处理消息的时候实现或者继承任何接口,拥有非常高的灵活性。我们一直坚信…

aippt:AI 智能生成 PPT 的开源项目

aippt&#xff1a;AI 智能生成 PPT 的开源项目 在现代办公和学习中&#xff0c;PPT&#xff08;PowerPoint Presentation&#xff09;是一种非常重要的展示工具。然而&#xff0c;制作一份高质量的PPT往往需要花费大量的时间和精力。为了解决这一问题&#xff0c;aippt项目应运…

一文说清flink从编码到部署上线

引言&#xff1a;目前flink的文章比较多&#xff0c;但一般都关注某一特定方面&#xff0c;很少有一个文章&#xff0c;从一个简单的例子入手&#xff0c;说清楚从编码、构建、部署全流程是怎么样的。所以编写本文&#xff0c;自己做个记录备查同时跟大家分享一下。本文以简单的…