实现简单的竖向tab - github_37516320的博客 - CSDN博客

项目中需要用到竖版的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>

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

Original url: Access
Created at: 2018-10-29 18:35:46
Category: default
Tags: none

未标明原创文章均为采集，版权归作者所有，转载无需和我联系，请注明原出处，南摩阿彌陀佛，知识，不只知道，要得到

请先后发表评论
  • 最新评论
  • 总共0条评论