这是category中header.vue的代码

<template>

<me-navbar class="header">

<i class="iconfont icon-back" slot="left"></i>

<div slot="center">搜索框</div>

<i class="iconfont icon-msg" slot="right"></i>

</me-navbar>

</template>

<script>

import MeNavbar from 'base/navbar';

export default {

name: 'CategoryHeader',

components: {

MeNavbar

}

};

</script>

<style lang="scss" scoped>

@import "~assets/scss/mixins";

.header {

&.mine-navbar {

background-color: $header-bgc-translucent;

}

.iconfont {

color: $icon-color-default;

font-size: $icon-font-size;

}

}

</style>

这是index.vue的代码

<template>

<div class="category">

<header class="g-header-container">

<category-header/>

</header>

<div class="g-content-container">

<div class="sidebar">

<category-tab/>

</div>

<div class="main"></div>

</div>

</div>

</template>

<script>

import CategoryHeader from './header';

import CategoryTab from './tab';

import CategoryContent from './content';

export default {

name: 'Category',

components: {

CategoryHeader,

CategoryTab,

CategoryContent

}

};

</script>

<style lang="scss" scoped>

@import "~assets/scss/mixins";

.category {

overflow:hidden;

width:100%;

height:100%;

background-color: $bgc-theme;

}

.g-content-container {

display: flex;

}

.sidebar {

width: 80px;

height: 100%;

}

.main {

flex: 1;

height: 100%;

}

</style>

这是tab.vue的代码

<template>

<me-scroll :scrollbar="false">

<ul class="tab">

<li

class="tab-item"

:class="{'tab-item-active': item.id === curId}"

v-for="(item, index) in items"

:key="index"

@click="switchTab(item.id)"

>{{item.name}}</li>

</ul>

</me-scroll>

</template>

<script>

import MeScroll from 'base/scroll';

import {categoryNames} from './config';

export default {

name: 'CategoryTab',

components: {

MeScroll

},

data() {

return {

curId: ''

};

},

created() {

this.init();

this.switchTab(this.items[0].id);//默认让第一个的显示红色

},

methods: {

init() {

this.items = categoryNames;

},

switchTab(id) {

if (this.curId === id) {//如果当前的ID === 传进来的ID  就表示我们点进来目前显示的，直接返回。

return;

}

//如果没有判断到那个条件，把id赋值给curId。在往外面触发一下switch-tab事件。把id传出去

this.curId = id;

this.$emit('switch-tab', id);

}

}

};

</script>

<style lang="scss" scoped>

@import "~assets/scss/mixins";

$tab-item-height: 46px;

.tab {

width: 100%;

&-item {

height: $tab-item-height;

background-color: #fff;

border-right: 1px solid $border-color;

border-bottom: 1px solid $border-color;

color: #080808;

font-size: $font-size-l;

font-weight: bold;

text-align: center;

line-height: $tab-item-height;

@include ellipsis();

&:last-child {

border-bottom: none;

}

}

&-item-active {

background: none;

border-right: none;

color: #f23030;

}

}

</style>