<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>