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

vue2.0+mint-ui资讯类顶导航和内容页联动实例(不是很完美)的更多相关文章

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

    <template><div><div class="navbox"><div class="nav" id=&quo ...

  2. vue2.0 + Element UI + axios实现表格分页

    注:本文分页组件用原生 html + css 实现,element-ui里有专门的分页组件可以不用自己写,详情见另一篇博客:https://www.cnblogs.com/zdd2017/p/1115 ...

  3. vue2.0+Element UI 实现动态表单(点击按钮增删一排输入框)

    对于动态增减表单项,Element UI 官方文档表单那一节已经介绍得很清楚了,我之前没有看见,绕了很多弯路,这里针对点击按钮增删一排输入框的问题做一个总结. 效果图如下 存在一排必填的姓名与手机号, ...

  4. vue2.0 + element ui 实现表格穿梭框

    element ui 官网里介绍了穿梭框(Transfer),但在实际使用过程中,会出现一些问题: 1.穿梭框里能放置的内容太少,不能满足复杂的业务需求. 2.当选项过多时,穿梭框很难实现分页,左右两 ...

  5. vue2.0+Element UI 表格前端分页和后端分页

    之前写过一篇博客,当时对element ui框架还不太了解,分页组件用 html + css 自己写的,比较麻烦,而且只提到了后端分页 (见 https://www.cnblogs.com/zdd20 ...

  6. vue2.0 仿手机新闻站(六)详情页制作

    1.结构 2.配置详情页路由 router.config.js /** * 配置 路由 */ // 导入组件 import Home from './components/Home.vue' impo ...

  7. vue 专题 vue2.0各大前端移动端ui框架组件展示

    Vue 专题 一个数据驱动的组件,为现代化的 Web 界面而生.具有可扩展的数据绑定机制,原生对象即模型,简洁明了的 API 组件化 UI 构建 多个轻量库搭配使用 请访问链接: https://ww ...

  8. iOS开发之资讯类App常用分类控件的封装与实现(CollectionView+Swift3.0+)

    今天博客中,我们就来实现一下一些常用资讯类App中常用的分类选择的控件的封装.本篇博客中没有使用到什么新的技术点,如果非得说用到了什么新的技术点的话,那么勉强的说,用到了一些iOS9以后UIColle ...

  9. vue2.0实现底部导航切换效果

    使用vue2.0写移动端的时候,经常会写底部导航效果,点击切换路由效果,实现图片和文字颜色切换.vue2.0也提供了很多ul框架供我们实现效果,今天就用原生的实现一个底部导航切换,直接上代码: 效果图 ...

随机推荐

  1. HTML中使用CSS样式(上)

    在每一个标签上都可以设置style属性,这就是CSS样式: <div style="height:48px;border: 1px solid red;text-align:cente ...

  2. 实战经验:CentOS 7.3安装完整开发环境

    系统版本 CentOS 7.3(1611) 安装开发环境 1) 通过group安装 # yum groups mark install “Development Tools” # yum groups ...

  3. JSP、ASP、PHP Web应用程序怎么这么多P!

    之前我们说完了计算机网络应用程序的两种结构:C/S,B/S(传送门)今天我们详细说一说B/S开发中的这么多P是干什么的. 1.什么是Web应用程序 一个Web应用程序是由完成特定任务的各种Web组件( ...

  4. 编程语言50年来的变化,我用50种编程语言告诉你“Hello world”怎么写!

    当我们学习一门新的语言时,"Hello, World!"通常是我们所写的第一个程序. 因此,所有程序员在职业生涯中至少完成了"Hello, World!"程序员 ...

  5. Codeforce-Ozon Tech Challenge 2020-B. Kuroni and Simple Strings(贪心)

    B. Kuroni and Simple Strings time limit per test1 second memory limit per test256 megabytes inputsta ...

  6. 算法——Java实现队列

    顺序队列: 概念: 队列是一种先进先出的线性表,只允许在一端插入,另一端删除.允许插入的一端称为队尾,允许删除的一端称为队头 顺序队列的实现: import org.junit.jupiter.api ...

  7. B. Welfare State(RMQ问题的逆向考虑)

    \(对于操作1,我们只关心最后一次操作.\) \(对于操作2,我们只关心值最大的一次操作.\) \(也就是说,我们记录每个居民最后一次被修改的位置\) \(然后它的最终答案就是从这个位置起,max(操 ...

  8. SpringBoot:模板引擎 thymeleaf、ContentNegotiatingViewResolver、格式化转换器

    目录 模板引擎 thymeleaf ContentNegotiatingViewResolver 格式化转换器 模板引擎 thymeleaf.ContentNegotiatingViewResolve ...

  9. NLTK的安装与简单测试

    1.NLTK简介 Natural Language Toolkit,自然语言处理工具包,在NLP领域中,最常使用的一个Python库.NLTK是一个开源的项目,包含:Python模块,数据集和教程,用 ...

  10. Linux文件系统基本结构

    (1)Linux文件系统为一个倒转的单根树状结构: (2)文件系统的根为“/”: (3)文件系统严格区分大小写: (4)路径使用“/”分割(windows使用“\”): 当前工作目录 (1)每个she ...