vue 滑动导航栏

查看效果图

 

 查看全部代码

<template>
  <div class="app">
     <div class="navBox">
       <ul class="ul">
         <li class="li" :class="{'li-activate': navIndex == index}" v-for="(item, index) in navList" :key="index" @click="handleNavClick(index)">
           {{item}}
          <div :class="{'navBox-li-line': navIndex == index}"></div>
         </li>
       </ul>
     </div>
  </div>
</template>

<script>
  export default {
  data() {
    return {
      navList: [
        '全部',
        '箱包装饰',
        '户外用品',
        '汽车用品',
        '数码电器',
        '家具日用'
      ],
      navIndex: 0
    };
  },
  created() {

  },
  mounted() {

  },
  methods: {
    handleNavClick (index) {
      this.navIndex = index;
    }
  },
}
</script>

<style lang='less' scoped>
.app {
  width: 100%;
  height: 100%;
  background: #f2f2f2;
}
.navBox {
  width: 100%;
  height: 3.5rem;
  background: #ffffff;
  .ul {
    width: 100%;
    padding: 0;
    margin: 0;
    list-style: none;
    overflow: auto;
    white-space: nowrap;
    position: relative;
    padding: 0rem 0.8rem;
    box-sizing: border-box;
    .li {
      width: auto;
      height: 100%;
      line-height: 3.5rem;
      margin-right: 0.5rem;
      display: inline-block;
      position: relative;
      .navBox-li-line {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 2px;
        background: #08568d;
      }
    }
    .li-activate {
      color: #08568d;
    }
    
  }
   // 隐藏滚动条
  .ul::-webkit-scrollbar {
    display: none;
  }
}
</style>