vue 左右切换的导航 实现tab左右切换

实现vue项目中左右切换导航

效果图如下 右边控件可以左右切换，亦可以点击tab切换
网上没有找到太多资料就自己琢磨了一下

直接上代码吧！

<template>
  <div class="wrap">
  	<!-- 标签导航 -->
  	<div style="padding:20px 0" class="searchBox navBox">
      <div style="width:1120px">
        <div class="good_city" :style="'transform: translateX(' + tabIndex + 'px);'">
        <div class="tabBox" :id="'tab' + item.id" v-for="(item,index) in tabList" :key='index' :class="tabChose == item.id?'tabChose':''" @click="choseTab(item)">
          <div>{{item.name}}</div>
        </div>
        </div>
      </div>
      <div class="contrlBox flexcenter">
        <i class="el-icon-arrow-left" :style="tabChose == tabList[0].id?'color:#CCCCCC':'color:#999999'" @click="tabLeft"></i>
        <div style="width:20px;height:1px"></div>
        <i class="el-icon-arrow-right" :style="tabChose == tabList[tabList.length-1].id?'color:#CCCCCC':'color:#999999'" @click="tabRight"></i>
      </div>
    </div>
  </div>
</template>

data 里面定义一下tab的内容

<script>
export default {
  data() {
    return {
		tabList:[
        {
          id:0,
          num:20,
          name:'美妆美妆美妆美妆美妆'
        },
        {
          id:1,
          num:20,
          name:'潮流'
        },
        {
          id:3,
          num:20,
          name:'炫酷炫酷炫酷炫酷炫酷'
        },
        {
          id:4,
          num:20,
          name:'炫酷1炫酷1炫酷1炫酷1炫酷1'
        },
        {
          id:5,
          num:20,
          name:'炫酷1炫酷1炫酷1炫酷1炫酷1'
        },
        {
          id:6,
          num:20,
          name:'2222炫酷1炫酷1炫酷1炫酷1炫酷1'
        }
      ],
      tabChose:0,//选择的tab
      tabIndex:0//tab需要移动的宽
	}
  }
}
</script>

接下来是切换tab的方法

methods: {
choseTab(e) { //点击tab
      var indexBefore = 0,indexNow = 0,
          tabidnow = 0;//需要移动的宽
      this.tabList.forEach((item, index) => {
        if (item.id == this.tabChose) {
          indexBefore = index//之前的下标
        }
        if(e.id == item.id){
          indexNow = index
        }
      })
      this.tabChose = e.id//赋值当前选中的值
      for(let i = indexBefore; i<indexNow; i++){//循环中间间隔了多少
        tabidnow += (document.getElementById('tab' + this.tabList[i].id).clientWidth + 50)
        if(i == indexNow - 1){
          this.tabIndex -= tabidnow
        }
      }
    },
    tabLeft(){//左箭头切换
      if (this.tabChose != 0) {//判断是否是初始位置
        var tabid = '';
        this.tabList.forEach((item, index) => {
          if (item.id == this.tabChose) {
            tabid = 'tab' + this.tabList[index - 1].id
          }
        })
        this.tabChose = tabid.replace(/tab/g,'')
        this.tabIndex += (document.getElementById(tabid).clientWidth + 50)
        //内容往左边移动上一个div的宽
      }
    },
    tabRight(){//右箭头切换
      var tabid = '',
          tabidnow = 'tab' + this.tabChose;
      this.tabList.forEach((item,index)=>{
        if(item.id == this.tabChose){
          tabid = 'tab' + this.tabList[index+1].id
        }
      })
      this.tabChose = tabid.replace(/tab/g,'')
      this.tabIndex -= (document.getElementById(tabidnow).clientWidth + 50)
    },
}

接下来是样式上 这里用的是less

<style scoped lang="less">
.flexcenter{
  display: flex;
  justify-content: center;
  align-items: center;
}
.navBox{
  width: 1200px;
  padding: 20px;
  margin: 10px auto;
  background: #ffffff;
  position: relative;
  overflow: hidden;
  .tabBox{
    padding: 9px 16px;
    border-radius: 4px;
    color: #333333;
    font-size: 16px;
    margin: 0 25px;
    float: left;
  }
  .tabBox:hover{
    cursor: pointer;
  }
  .tabChose{
    background: #3E79FE;
    color: #ffffff;
  }
  .good_city{
    width: 9999px;//这里其实不应该写死 应该写成动态赋值 这里我就先写死
    height: 40px;
    transition: all .5s;
  }
  .contrlBox{
    position: absolute;
    right: 0;
    bottom: 0;
    width: 80px;
    height: 80px;
    background: #ffffff;
    i{
      font-size: 18px;
      flex-wrap: bold;
    }
    i:hover{
      cursor: pointer;
    }
  }
}
</style>

这样就可以实现tab左右切换

实现原理其实就是获取DOM节点的宽度，然后对父级进行一个调整，实现起来也并不是很难