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切换线条跟随效果
相关推荐
花海如潮淹几秒前
前端性能追踪工具:用户体验的毫秒战争
前端·笔记·ux
_丿丨丨_5 小时前
XSS(跨站脚本攻击)
前端·网络·xss
天天进步20155 小时前
前端安全指南:防御XSS与CSRF攻击
前端·安全·xss
呼啦啦呼啦啦啦啦啦啦6 小时前
利用pdfjs实现的pdf预览简单demo(包含翻页功能)
android·javascript·pdf
拾光拾趣录7 小时前
括号生成算法
前端·算法
拾光拾趣录8 小时前
requestIdleCallback:让你的网页如丝般顺滑
前端·性能优化
前端 贾公子8 小时前
vue-cli 模式下安装 uni-ui
前端·javascript·windows
拾光拾趣录8 小时前
链表合并:双指针与递归
前端·javascript·算法
@大迁世界9 小时前
前端:优秀架构的坟墓
前端·架构
拼图2099 小时前
element-plus——图标推荐
javascript·vue.js·elementui