在vue中制作tab标签或导航下划线跟随效果

这篇主要记录在vue制作tab标签或者导航栏的下划线跟随效果

template中的html结构

要单独写一个标签做下划线，我用的是名为line的标签来做的
给它动态绑定left值

<ul class="tabs">
  <i class="line" :style="{left: slideLeft}">i>
  <li v-for="(item, index) in tabList" :key="index" class="tab" :class="{'tab-current':  index == currentIndex}" @click="clickTab(index)">{{item}}li>
ul>

tablist数组长度发生变化时，依然适用
感觉比使用translateX计算滚动值更加简单一点

<script>
export default {
  name: '',
  data () {
    return {
      tabList: ['城市热销', '看了又看', '再看一遍'],
      tabLen: '',
      currentIndex: 0,
      slideLeft: '',
      width:'100',
    }
  },
  methods: {
    // 点击时的下划线跟随效果
    clickTab (index) {
      this.currentIndex = index
      //算出一个tab所占屏幕的宽度，除以2是为了让下划线待在tab标签宽度二分之一处，
      //因为css中给line标签样式使用了绝对定位，
      //并且设置了margin负值，所以这个位置可以让line正好在tab标签下面居中
      const left = this.width / this.tabLen / 2
      // 一次滑动二分一tab标签值
      // 三个标签，可以看成把屏幕分成了6份，每人占2份
      // 第一个下划线，从第1份的地方开始，是0*2+1
      // 第二个下划线，从第3份的地方开始，是1*2+1
      // 第三个下划线，从第5份的地方开始, 是2*2+1
      this.slideLeft = left * (index * 2 + 1) + '%'
    },
    // 刚进入页面没有点击时的下划线设置
    slideLineLeft () {
      this.tabLen = this.tabList.length
      const left = this.width / this.tabLen / 2
      this.slideLeft = left * (this.currentIndex * 2 + 1) + '%'
    }
  },
  mounted () {
    this.slideLineLeft()
    // 如果不写这个函数，页面刚加载时默认tab的下划线位置是不对的
  }
}
</script>

重点看line的样式，left值动态控制，所以在css样式中先不写

position: absolute
bottom: 0
width: .8rem
margin-left: -.4rem
transition: all 0.3s

.tabs
 display: flex
 justify-content: space-around
 text-align: center
 position: relative
 .tab
  font-size: .32rem
  line-height: .88rem
  color: #c3c6cd
 .tab-current
  font-weight: 700;
  color: #1c253a;
 .line
  position: absolute
  bottom: 0
  width: .8rem//可微调
  margin-left: -.4rem//可微调
  transition: all 0.3s
  height: .08rem
  border-radius: .04rem
  background: #fe686c