效果如下

01.gif

View部分

  1. <div id="app" class="tab-navbar">
  2.     <nav>
  3.         <a v-for= "(v, i) in list" :key= "v" :class="{ active: index === i }" @click="select(i)"> 标题{{i + 1}} </a>
  4.     </nav>
  5.     <div class="items">
  6.         <div class="ul" :style="`--tab-count: ${list.length};--tab-index: ${index}`">
  7.             <div class="li" v-for="(v, i) in list" :key="v" :style="`--bg-color: ${v}`"> 内容{{i + 1}} </div>
  8.         </div>
  9.     </div>
  10. </div>

JS部分

  1. var app = new Vue({
  2.     el: '#app',
  3.     data: function(){
  4.         return {
  5.             index: 0,
  6.             list: [ "#f66", "#09f", "#3c9"]
  8.         };
  9.     },
  10.     methods: {
  11.         select(i) {
  12.             this.index = i;
  13.         }
  14.     }
  15. });

css 部分

  1. .tab-navbar {
  2.     display: flex;
  3.     overflow: hidden;
  4.     flex-direction: column-reverse;
  5.     border-radius: 10px;
  6.     width: 300px;
  7.     height: 400px;
  8. }
  10. nav {
  11.     width: 300px;
  12.     display: flex;
  13.     height: 40px;
  14.     background-color: #f0f0f0;
  15.     line-height: 40px;
  16.     text-align: center;
  17. }
  19. a {
  20.     flex: 1;
  21.     cursor: pointer;
  22.     transition: all 300ms;
  23. }
  25. .active {
  26.     background-color: #66f;
  27.     font-weight: bold;
  28.     color: #fff;
  29. }
  32. .items {
  33.     flex: 1;
  34. }
  36. .ul {
  37.     --tab-index: 0;
  38.     --tab-width: calc(var(--tab-count) * 100%);
  39.     --tab-move: calc(var(--tab-index) / var(--tab-count) * -100%);
  40.     display: flex;
  41.     flex-wrap: nowrap;
  42.     width: var(--tab-width);
  43.     height: 100%;
  44.     transform: translate3d(var(--tab-move), 0, 0);
  45.     transition: all 300ms;
  46. }
  47. .li {
  48.     display: flex;
  49.     justify-content: center;
  50.     align-items: center;
  51.     flex: 1;
  52.     background-color: var(--bg-color);
  53.     font-weight: bold;
  54.     font-size: 20px;
  55.     color: #fff;
  56. }