实现简单的竖向tab

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

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

< template >

< div class= "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 >

有哪个大神有更好的实现方式 可以评论分享，多指教~~