vue2.0+mint-ui 仿资讯类顶导航内容联动优化

<template>
<div>
<div class="navbox">
<div class="nav" id="navbox">
<mt-button size="small" v-for="(tab, i) in tabs" :class="{active01:tab.hasactive}" @click="forChageTag(i)" @click.native.prevent="active = tab.container">{{tab.title}}</mt-button>
<!--<mt-button size="small" @click.native.prevent="active = 'tab-container2'">tab 2</mt-button>
<mt-button size="small" @click.native.prevent="active = 'tab-container3'">tab 3</mt-button>
<mt-button size="small" @click.native.prevent="active = 'tab-container4'">tab 4</mt-button>
<mt-button size="small" @click.native.prevent="active = 'tab-container5'">tab 5</mt-button>
<mt-button size="small" @click.native.prevent="active = 'tab-container6'">tab 6</mt-button>
<mt-button size="small" @click.native.prevent="active = 'tab-container7'">tab 7</mt-button>
<mt-button size="small" @click.native.prevent="active = 'tab-container8'">tab 8</mt-button>
<mt-button size="small" @click.native.prevent="active = 'tab-container9'">tab 9</mt-button>
<mt-button size="small" @click.native.prevent="active = 'tab-container10'">tab 10</mt-button>
<mt-button size="small" @click.native.prevent="active = 'tab-container11'">tab 11</mt-button>
<mt-button size="small" @click.native.prevent="active = 'tab-container12'">tab 12</mt-button>-->
</div>
</div>
<div class="page-tab-container">
<mt-tab-container class="page-tabbar-tab-container" v-model="active" swipeable>
<mt-tab-container-item id="tab-container1">
<!-- cell组件 -->
<mt-cell v-for="n in 20" title="tab-container 1"></mt-cell>
</mt-tab-container-item>

<mt-tab-container-item id="tab-container2">
<!-- cell组件 -->
<mt-cell v-for="n in 5" title="tab-container 2"></mt-cell>
</mt-tab-container-item>

<mt-tab-container-item id="tab-container3">
<!-- cell组件 -->
<mt-cell v-for="n in 7" title="tab-container 3"></mt-cell>
</mt-tab-container-item>

<mt-tab-container-item id="tab-container4">
<!-- cell组件 -->
<mt-cell v-for="n in 10" title="tab-container 4"></mt-cell>
</mt-tab-container-item>

<mt-tab-container-item id="tab-container5">
<!-- cell组件 -->
<mt-cell v-for="n in 5" title="tab-container 5"></mt-cell>
</mt-tab-container-item>

<mt-tab-container-item id="tab-container6">
<!-- cell组件 -->
<mt-cell v-for="n in 7" title="tab-container 6"></mt-cell>
</mt-tab-container-item>

<mt-tab-container-item id="tab-container7">
<!-- cell组件 -->
<mt-cell v-for="n in 10" title="tab-container 7"></mt-cell>
</mt-tab-container-item>

<mt-tab-container-item id="tab-container8">
<!-- cell组件 -->
<mt-cell v-for="n in 5" title="tab-container 8"></mt-cell>
</mt-tab-container-item>

<mt-tab-container-item id="tab-container9">
<!-- cell组件 -->
<mt-cell v-for="n in 7" title="tab-container 9"></mt-cell>
</mt-tab-container-item>

<mt-tab-container-item id="tab-container10">
<!-- cell组件 -->
<mt-cell v-for="n in 10" title="tab-container 10"></mt-cell>
</mt-tab-container-item>

<mt-tab-container-item id="tab-container11">
<!-- cell组件 -->
<mt-cell v-for="n in 5" title="tab-container 11"></mt-cell>
</mt-tab-container-item>

<mt-tab-container-item id="tab-container12">
<!-- cell组件 -->
<mt-cell v-for="n in 7" title="tab-container 12"></mt-cell>
</mt-tab-container-item>
</mt-tab-container>
</div>
</div>
</template>

<script>
export default {
name: 'page-tab-container',
data() {
return {
active: 'tab-container1',
marginLeft: 0,
tabs: [{
title: '推荐',
container: 'tab-container1',
hasactive: true
}, {
title: '美文',
container: 'tab-container2',
hasactive: false
}, {
title: '健康',
container: 'tab-container3',
hasactive: false
}, {
title: '资讯',
container: 'tab-container4',
hasactive: false
}, {
title: '娱乐',
container: 'tab-container5',
hasactive: false
}, {
title: '搞笑',
container: 'tab-container6',
hasactive: false
}, {
title: '美图',
container: 'tab-container7',
hasactive: false
}, {
title: '美食',
container: 'tab-container8',
hasactive: false
}, {
title: '科技',
container: 'tab-container9',
hasactive: false
}, {
title: '文化',
container: 'tab-container10',
hasactive: false
}, {
title: '历史',
container: 'tab-container11',
hasactive: false
}, {
title: '财经',
container: 'tab-container12',
hasactive: false
}
]};
},
methods:{
forChageTag (index){
console.log(index);
console.log(this.tabs.length);
var tablen = this.tabs.length;
for(var n = 0;n < tablen; n++){
if(n == index){
this.tabs[index].hasactive = true;
console.log(document.querySelector('#navbox'));
}else{
this.tabs[n].hasactive = false;
}
}
}
},
watch:{
active:function (newValue) {
// active即为mt-tab-container的参数，这里监听它的改变并可以做相关操作：
// 在你的tabBar组件点击的时候更改active的值
// 滑动mt-tab-container-item组件即更改active的值，监听newValue的变化并操作你的tabBar，使得点击切换和滑动切换相关联
console.log(newValue);
var tabarr = newValue.replace("tab-container", "");
console.log(tabarr);
var tabIndex = parseInt(tabarr)-1;
console.log(tabIndex);
var tablen = this.tabs.length;
for(var n = 0;n < tablen; n++){
if(n == tabIndex){
this.tabs[tabIndex].hasactive = true;
}else{
this.tabs[n].hasactive = false;
}
}
}
}
};
</script>
<style lang="stylus" scoped>
.item
display: inline-block
.navbox
position: fixed
left: 0
top: 0
z-index: 20
width: 100%
overflow-x: scroll
overflow-y: hidden
background-color: #fff
.nav
padding: 0 10px
width: 1285px
position: relative
background-color: #f6f8fa
box-shadow: 0 0 1px #b8bbbf
.mint-button--small
margin: 0 25px
padding: 0
.mint-button--default
color: #656b79
background-color: #f6f8fa
box-shadow: none
.mint-button
border-radius: 0
.active01
color: #f00
border-bottom: 4px solid #f00

.navbox::-webkit-scrollbar
display: none

</style>