<template>
<div>
<div class="navbox">
<div class="nav">
<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',
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;
}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: 10000px
position: relative
background-color: #f6f8fa
box-shadow: 0 0 1px #b8bbbf
.mint-button--small
margin: 0 25px
padding: 0
.mint-button--default
color: #656b79
box-shadow: none
.mint-button
border-radius: 0
.active01
color: #f00
border-bottom: 4px solid #f00
.navbox::-webkit-scrollbar
display: none
</style>