vue横向滚动导航栏

直接上代码

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

 data() {
    return {
    	items: [
        {
          label: '1111'
        },
        {
          label: '2222'
        },
        {
          label: '3333'
        },
        {
          label: '4444'
        },
        {
          label: '5555'
        },
        {
          label: '6666'
        }
      ],
      subRouteUrl: [
        '/Solution/showroom', 
        '/Solution/partybuild', 
        '/Solution/technology', 
        '/Solution/realitymuseum', 
        '/Solution/cultural', 
        '/Solution/safetymuseum'
      ],
      navIndex: 0
    };
  },
  methods: {
    handleNavClick (index) {
      this.navIndex = index;
      this.$router.push(this.subRouteUrl[index])
    }
  },
  created () {
    
    let path = this.$route.path;
    for(let i = 0; i < this.subRouteUrl.length; i++){
      if(path == this.subRouteUrl[i]){
        this.navIndex = i;
      }
    }
  
  },

.navBox {
  width: 100%;
  height: 3.5rem;
  background: #ffffff;
}
.navBox .ul {
  width: 100%;
  padding: 0;
  margin: 0;
  list-style: none;
  overflow: auto;
  //在ios上滚动圆滑
  -webkit-overflow-scrolling : touch;
  white-space: nowrap;
  position: relative;
  padding: 0rem 0.8rem;
  box-sizing: border-box;
}
.navBox .ul .li {
  width: auto;
  height: 100%;
  line-height: 3.5rem;
  margin-right: 0.5rem;
  display: inline-block;
  position: relative;
}
.navBox .ul .li .navBox-li-line {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: #08568d;
}
.navBox .ul .li-activate {
  color: #08568d;
}
.navBox .ul::-webkit-scrollbar {
  display: none;
}