前言
还记得之前我们通过 css 选择器实现的表情选择器，忘记的话，可以回头看看，那今天了 我们把它又弄来了，没错，他又来了，不过这回我们实现的思路和以前的可不一样哦，他要引入我们前几章学习的变量，好了废话不多说，开始把。
标签导航
回顾一下我们之前说的知识：
- 读取变量：
elem.style.getPropertyValue() - 设置变量：
elem.style.setProperty() - 删除变量：
elem.style.removeProperty()
实现上，主要还是在<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！！！
