css+js:实现tab切换线条跟随效果

目录

实现效果

使用css和js实现一个tab切换的效果

原理解析

如上图

  • 红色框框代表盒子,总宽度记作 totalWidth
  • 绿色框框代表每一项,宽度记作itemWidth
  • 深蓝色框框代表的是下划线,宽度记作activeWitdh

那么我们可以得到线的左边距是每一项的左边距加上一个值

这个值是每一项的宽度减去线的宽度的结果再除以二

js 复制代码
// index是当前点击的item索引,从0开始
itemWidth * index + (itemWidth - activeWitdh) / 2

代码实现

html 复制代码
<div id="app">
  <div class="tabs_wrap">
    <div
      v-for="(item, index) in tabsList"
      :key="item.value"
      :class="['item','item-' + (index+1)]"
      @click="changeIndex(index)"
    >
      {{ item.label || ""}}
    </div>
    <div class="active" :style="{left: left + 'px'}"></div>
  </div>
</div>
css 复制代码
.tabs_wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-around;
  font-size: 32px;
  color: #333;
  font-weight: bold;
  height: 88px;
  line-height: 88px;
  border: 4px solid skyblue;
}

.item {
  cursor: pointer;
  border: 1px solid pink;
  flex: 1;
  text-align: center;
}

.active {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 50px;
  height: 8px;
  background-color: #2979ff;
  border-radius: 50px;
  transition: left 0.3s ease;
}
html 复制代码
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

<script>
  const { createApp } = Vue;

  const app = {
    data() {
      return {
        currentIndex: 0,
        left: 0,
        tabsList: [
          {
            label: "推荐",
            value: "1",
          },
          {
            label: "热点",
            value: "2",
          },
          {
            label: "八卦",
            value: "3",
          },
          {
            label: "娱乐",
            value: "4",
          },
        ],
      };
    },

    methods: {
      initPostion(index) {
        let currentItem = document.querySelector(".item-" + (index + 1));
        let activeItem = document.querySelector(".active");
        console.log(currentItem.offsetWidth);
        console.log(activeItem.offsetWidth);

        // 计算下划线位置
        this.left =
          currentItem.offsetWidth * index +
          (currentItem.offsetWidth - activeItem.offsetWidth) / 2;
        console.log(this.left);
      },

      changeIndex(index) {
        if (this.currentIndex === index) return;

        this.currentIndex = index;
        this.initPostion(index);
      },
    },

    mounted() {
      this.initPostion(0);
    },
  };

  createApp(app).mount("#app");
</script>

在线演示:https://mouday.github.io/front-end-demo/tabs/tabs.html

参考文章

  1. uniapp如何实现tab切换线条跟随效果
相关推荐
Simon_He14 分钟前
一个免费的在线压缩网站超越了付费的压缩软件
前端·开源·图片资源
巴巴_羊1 小时前
React Ref使用
前端·javascript·react.js
拾光拾趣录1 小时前
CSS常见问题深度解析与解决方案(第三波)
前端·css
徊忆羽菲1 小时前
Echarts3D柱状图-圆柱体-文字在柱体上垂直显示的实现方法
javascript·ecmascript·echarts
轻语呢喃1 小时前
JavaScript :字符串模板——优雅编程的基石
前端·javascript·后端
杨进军1 小时前
React 协调器 render 阶段
前端·react.js·前端框架
中微子1 小时前
Blob 对象及 Base64 转换指南
前端
风铃喵游1 小时前
让大模型调用MCP服务变得超级简单
前端·人工智能
中微子2 小时前
智能前端实践之 shot-word demo
前端
归于尽2 小时前
智能前端小魔术,让图片开口说单词
前端·react.js