在vue中制作tab标签或导航下划线跟随效果

最新推荐文章于 2024-04-19 15:21:08 发布

大hei客

最新推荐文章于 2024-04-19 15:21:08 发布

阅读量2.3k

点赞数

分类专栏：笔记文章标签： vue.js css3

本文链接：https://blog.csdn.net/qq_49173190/article/details/125326012

版权

本文介绍如何在Vue项目中创建tab导航，并实现下划线随着选中项动态变化的效果。通过使用HTML结构，结合Vue动态绑定CSS属性left，确保tablist数组长度改变时仍能正常工作。采用这种方法避免了复杂的translateX计算。

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

这篇主要记录在vue制作tab标签或者导航栏的下划线跟随效果

template中的html结构

要单独写一个标签做下划线，我用的是名为line的标签来做的
给它动态绑定left值

<ul class="tabs">
  <i class="line" :style="{left: slideLeft}"></i>
  <li v-for="(item, index) in tabList" :key="index" class="tab" :class="{
    &

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

大hei客

关注关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

vue2/3 - 菜单导航栏下划线跟随效果动画，鼠标移入后下划线滑动出现且跟随的效果（高效简洁源代码运行示例）

高级前端工程师

02-07

1795

tab随下划线同步滑动

03-19

tab随下划线同步滚动，方便大家的引用以及调用

参与评论您还未登录，请先登录后发表或查看评论

如何实现小程序tab栏下划线动画效果

10-16

主要介绍了如何实现小程序tab栏下划线动画效果,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

关于Tab标签的一些实现方法

pjh的博客

04-11

417

1.在ViewPager中直接使用PagerTabStrip ，如下图： android:id="@+id/vp" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_centerHorizonta

vue中如何加入横线_Vue实现textarea固定输入行数与添加下划线样式的思路详解

weixin_39715187的博客

12-19

2049

先上效果图###textarea下划线设置一张1*35 //行高的图片 , 设置背景图即可.background: url('./img/linebg.png') repeat;border: none;outline: none;overflow: hidden;line-height: 35px;//注意行高要和背景图高度一致resize: none;固定输入行数需求:用户固定不论多少字节,...

vue给文字加下划线

qq_45349764的博客

08-11

6077

vue给文字加下划线

vue 实现类似于锚点滑动或者点击不同的tab时添加下划线并滑动到对应的盒子，手动滑动下划线也随位置变动

最新发布

小菜鸡，努力中~~

04-19

310

【代码】vue 实现类似于锚点滑动或者点击不同的tab时添加下划线并滑动到对应的盒子，手动滑动下划线也随位置变动。

vue动态添加下划线

weixin_32896095的博客

09-06

1万+

给li设置样式 li.done { text-decoration: line-through; color: red; } <li :class="{'done':todo.done}" xxxxxx/> todos: [ { text: '吃饭', done: false }, { text: '打游戏', done: false }...

vue3实现tabs导航栏，点击每个导航项有下划线动画效果

qdm13209211861的博客

03-29

2051

vue3实现导航栏，点击每个导航项有下划线动画效果

Vue实现textarea固定输入行数与添加下划线样式的思路详解

08-27

主要介绍了使用Vue实现textarea固定输入行数与添加下划线样式的思路详解，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下

js实现移动端tab切换时下划线滑动效果

10-16

在JavaScript和CSS的世界里，创建动态的用户界面是吸引用户注意力和提升用户体验的重要方式。...在实际开发中，可以根据需求进行调整，例如添加动画库如jQuery或Vue.js，或者使用CSS动画来实现更复杂的滑动效果。

web前端入门到实战：纯CSS导航栏下划线跟随效果

软件开发-前端开发-IT

08-17

953

导航栏下划线跟随效果这个效果是我在业务开发的过程中遇到的一个类似的小问题。其实即便让我借助 Javascript ，我的第一反应也是，感觉很麻烦啊。所以我一直在想，有没有可能只使用 CSS 完成这个效果呢？定义需求我们定义一下简单的规则，要求如下：假设 HTML 结构如下： <ul> <li>不可思议的CSS</li> <li>导航栏&...

vue elementui el-tabs 底部的下划线和切换时的下划线移动到上方

LONGYog的博客

05-16

2627

Vue Elementui el-tabs 底部的下划线和切换时的下划线移动到上方实现效果如图：代码： <template> <div> <div style="background-color: #f4f4f4;margin:50px 0 0 260px;width:900px;height:600px;padding:50px"> <el-tabs v-model="activeName">

自写一个tabs标签页，点击tab时，下划线动画过渡

weixin_45899022的博客

07-07

2361

elementUI的el-tabs标签页组件，鼠标移到label上可显示icon按钮图标，但是点击icon时也同时选中了tab，还有下滑线也会因为加了icon而变长，所以需要自写一个tabs标签页解决这两个问题效果图：完整代码： <template> <div class="container"> <div class="tabs-group"> <ul> <li v-for="(item,i) in ta

前端Vue自定义精美tabs，可设置下划线图标热门标题

chenchuang0128的博客

06-26

1028

### 使用方法```使用方法-- tabchange: tab选择事件 tabList：tab数据-->```#### HTML代码实现部分```html-- tabchange: tab选择事件 tabList：tab数据-->data() {return {key: '1',value: '推荐'},key: '2',value: '标题一'},key: '3',value: '标题二'},

加粗、倾斜、下划线、删除线标签

2202_75549187的博客

12-06

739

加粗、倾斜、下划线、删除线标签

vue中如何加入横线_vue