CSS之变量(五)标签导航

·  阅读 40
CSS之变量(五)标签导航

「这是我参与11月更文挑战的第二十八天,活动详情查看:2021最后一次更文挑战」。

往期推荐:

CSS之变量

CSS之变量(二)条形加载条

CSS之变量(三)心形加载条

CSS之变量(四)悬浮跟踪按钮

前言

还记得之前我们通过 css 选择器实现的表情选择器,忘记的话,可以回头看看,那今天了 我们把它又弄来了,没错,他又来了,不过这回我们实现的思路和以前的可不一样哦,他要引入我们前几章学习的变量,好了废话不多说,开始把。

标签导航

回顾一下我们之前说的知识:

  • 读取变量:elem.style.getPropertyValue()

  • 设置变量:elem.style.setProperty()

  • 删除变量:elem.style.removeProperty()

tap.gif

实现上,主要还是在<ul>上通过定义--tab-index表示当前页,点击时重新设置置--tab-index的值。在设置变量 tab-move, 通过calc()计算--tab-index--tab-move的关系,使用transform:translate3d()移动<ul>

代码实现

<div class="tab-navbar">
  <nav>
    <a v-for="(v, i) in list" :key="v" :class="{ active: index === i }" @click="select(i)">标题{{i + 1}}</a>
  </nav>
  <div>
    <ul ref="tabs" :style="`--tab-count: ${list.length}`" class="ml">
      <li v-for="(v, i) in list" :key="v" :style="`--bg-color: ${v}`">内容{{i + 1}}</li>
    </ul>
  </div>
</div>
复制代码
.ml {
  margin: 0;
  padding: 0;
}

.tab-navbar {
  display: flex;
  overflow: hidden;
  flex-direction: column-reverse;
  border-radius: 10px;
  width: 800px;
  height: 500px;
  nav {
    display: flex;
    height: 40px;
    background-color: #f0f0f0;
    line-height: 40px;
    text-align: center;
    a {
      flex: 1;
      cursor: pointer;
      transition: all 300ms;
      &.active {
        background-color: pink;
        color: #fff;
      }
    }
  }
  div {
    flex: 1;
    ul {
      --tab-index: 0;
      --tab-width: calc(var(--tab-count) * 100%);
      --tab-move: calc(var(--tab-index) / var(--tab-count) * -100%);
      display: flex;
      flex-wrap: nowrap;
      width: var(--tab-width);
      height: 100%;
      transform: translate3d(var(--tab-move), 0, 0);
      transition: all 300ms;
    }
    li {
      display: flex;
      justify-content: center;
      align-items: center;
      flex: 1;
      background-color: var(--bg-color);
      font-weight: bold;
      font-size: 20px;
      color: #fff;
    }
  }
}
复制代码
export default {
  data() {
    return {
      index: 0,
      list: ["red", "orange", "yellow", "green"]
    };
  },
  methods: {
    select(i) {
      this.index = i;
      this.$refs.tabs.style.setProperty("--tab-index", i);
    }
  }
};
复制代码

好,今天就到这里了,今天努力的你依然是最棒的,Bye Bye!!!

分类:
前端
标签: