实现简单的竖向tab

项目中需要用到竖版的Tab，但是用的框架没有合适的，所以没办法，只能自己写了，希望能帮助到其他人。写的比较简单，只符合自己使用的效果，大神勿喷。效果是这种的：标签数量很多，超出部分可以点击上下的icon切换滚动，用的是vue和iviewUI的icon实现的template>div class="tabWrap">divclass="tabNav

驚鴻入梦

6685人浏览 · 2018-01-04 14:07:33

驚鴻入梦 · 2018-01-04 14:07:33 发布

项目中需要用到竖版的Tab，但是用的框架没有合适的，所以没办法，只能自己写了，希望能帮助到其他人。写的比较简单，只符合自己使用的效果，大神勿喷。

效果是这种的：标签数量很多，超出部分可以点击上下的icon切换滚动，用的是vue和iviewUI的icon实现的

  
   <template>
  
 <divclass="tabWrap">

  <div  class="tabNav">
 
  <span  class="iconClass">
 
  <Icon  type="chevron-up"  @click.native="upTab"></Icon>
 
  </span>
 
  <div  id="tabBar">
 
  <ul  id="tabUl">
 
  <li  :class="[{activeTab:index ===  tabIndex},'tabLi']"  v-for="(item,index) in tabList" :key="index"
 
  @click="changeTab(index)">{{item.label}}</li>
 
  </ul>
 
  </div>
 
  <span  class="iconClass">
 
  <Icon  type="chevron-down"  @click.native="downTab"></Icon>
 
  </span>
 
  </div>
 
    <div  class="tabContent">
   
    <div  v-if="tabIndex === 0" >content内容</div>
   
    </div>
   
    </div>
   
    </div>
   
     </template>
    
     <script>
    
       watch: {
      
       tabIndex: function (newVal) {
      
       this.imgShow = 0
      
       let scrollNav = document.getElementById('tabUl')
      
       let tabBar = document.getElementById('tabBar')
      
       let transformHeight = scrollNav.scrollHeight - tabBar.clientHeight
      
       if (Number(newVal) >= 3) {
      
       this.$nextTick(function () {
      
       scrollNav.style.transform = `translateY(-${transformHeight}px)`
      
       })
      
       } else {
      
       this.$nextTick(function () {
      
       scrollNav.style.transform = 'translateY(0px)'
      
       })
      
       }
      
       }
      
       },
      
       data () {
      
       return {
      
       tabIndex: 0,
      
         tabList: [
        
         {label: 'tab1'},
        
         ],
        
       }
      
       },
      
       methods: {
      
       // 更改tab页签
      
       changeTab (index) {
      
       this.tabIndex = index
      
       this.$store.state.proofActiveName = this.tabIndex
      
       this.imgShow = 0
      
       },
      
         // 调整Tab滚动
        
         upTab () {
        
         let scrollNav = document.getElementById('tabUl')
        
         this.$nextTick(function () {
        
         scrollNav.style.transform = 'translateY(0px)'
        
         })
        
         },
        
         downTab () {
        
         let scrollNav = document.getElementById('tabUl')
        
         let tabBar = document.getElementById('tabBar')
        
         let transformHeight = scrollNav.scrollHeight - tabBar.clientHeight
        
         this.$nextTick(function () {
        
         scrollNav.style.transform = `translateY(-${transformHeight}px)`
        
         })
        
         }
        
       }
      
     </script>
    
    <style lang="less">
   
    .tabWrap{
   
    width:100%;
   
    height: 100%;
   
    .tabNav{
   
    width:40px;
   
    height: 100%;
   
    float: left;
   
    #tabBar{
   
    height:e("calc(100% - 60px)");
   
    overflow: hidden;
   
    z-index: -1;
   
    #tabUl{
   
    width: 34px;
   
    margin-left:  6px;
   
    border-right:  1px solid #dddee1;
   
    transition: -webkit-transform  .5s ease-in-out;
   
    transition: transform  .5s ease-in-out;
   
    .tabLi{
   
    width:100%;
   
    font-size: 14px;
   
    writing-mode:  vertical-lr;
   
    padding: 14px 0 14px  5px;
   
    cursor: pointer;
   
    border: 1px solid #dddee1;
   
    border-right:  0;
   
    margin-bottom:  5px;
   
    border-radius:  5px 0 0 6px;
   
    text-align: center;
   
    vertical-align:  middle;
   
    background: #f8f8f9;
   
    }
   
    .tabLi:hover{
   
    color:#2d8cf0;
   
    }
   
    .activeTab{
   
    color:#2d8cf0;
   
    background: #ffffff;
   
    width: 36px;
   
    z-index: 100;
   
    }
   
    }
   
    }
   
    .iconClass{
   
    display: inline-block;
   
    height: 30px;
   
    margin-left:  8px;
   
    cursor: pointer;
   
    text-align: center;
   
    line-height:  30px;
   
    width:e("calc(100% - 10px)");
   
    }
   
    }
   
    .tabContent{
   
    float:left;
   
    background: #fff;
   
    width:e("calc(100% - 41px)");
   
    height: 100%;
   
    overflow: auto;
   
    }
   
    }
   
    </style>