vux的tab控件实现头部tab栏切换功能

1、子组件定义（例：tab1）：

<template>
  <div class="charge-view acc-child" slot="tab1">sdfg</div>
</template>

<script>
  export default {
    name: "charge"
  }
</script>

<style lang="scss">
</style>

2、在app.vue中，通过v-for循环遍历tab页签，通过:class绑定当前选中tab样式。tab切换主要依靠组件component实现，通过@click处理内容页的切换。具体代码如下：

<template>
  <div class="view-container">
    <div class="tab-content">
      <div class="tab-header">
        <Sticky>
          <tab :line-width=2 default-color="676767" bar-active-color="#f9a64a" v-model="index" custom-bar-width="1.8rem">
            <tab-item class="vux-center" v-for="(item, index) in tabList" :key="index" @on-item-click="getItem(index);tabChange(index)" :class="{active:index == iscur}">
              <div class="tab-item-text">{{item}}</div>
            </tab-item>
          </tab>
        </Sticky>
      </div>
      <div class="tab-center">
        <component v-bind:is="tabView"></component>
      </div>
    </div>
  </div>
</template>

<script>
  import {Sticky, Tab, TabItem} from 'vux';
  import tab1 from './child/charge.vue'
  import tab2 from './child/reportForm.vue'

  export default {
    name:'account',
    // props: ['navList'],
    data () {
      return {
        index:0,
        tabList: ['账 目', '报 表'],
        tabView: 'tab1',
        iscur:0,
      }
    },
    computed:{
    },
    components:{
      Sticky,
      Tab,
      TabItem,
      tab1,
      tab2
    },
    methods:{
      getItem(index){
        this.iscur = index;
        this.$emit('getIndex', index)
      }
    }
  }
</script>

<style lang="scss">
  @import "../../assets/scss/define";
  .active{
    color: #00a4a6 !important;
  }
  .tab-header{
    .vux-tab{
      background-color: #f7f7fa;
      .vux-tab-item{
        font-size: 1.25em;
      }
    }
  }
  .acc-child{
    position: absolute;
    top: 51px;
    padding: 2%;
  }
</style>

3、实现效果如下：