建议在tabbar组件中设置了tabWidth之后， 加个参数，设置是否居中显示 about eeui HOT 2 CLOSED

<template>
    <div class="app">

        <div class="nav">
            <template v-for="(item, index) in tabPages">
                <text :class="[index === position ? 'nav-active' : 'nav-item']" @click="switchPage(index)">{{item.title}}</text>
                <text v-if="index < tabPages.length - 1" class="nav-line"></text>
            </template>
        </div>

        <tabbar
                ref="reflectName"
                class="tabbar"
                :eeui="{ tabType: 'top', tabHeight: 0 }"
                :tabPages="tabPages"
                @pageSelected="pageSelected"></tabbar>

    </div>
</template>

<style>
    .app {
        flex: 1
    }

    .nav {
        width: 750px;
        height: 100px;
        background-color: #3EB4FF;
        flex-direction: row;
        justify-content: center;
        align-items: center;
    }

    .nav-item,
    .nav-active {
        width: 120px;
        height: 100px;
        line-height: 100px;
        text-align: center;
        font-size: 28px;
        color: #ffffff;
        font-weight: 300;
    }

    .nav-active {
        color: #E1C040;
        font-weight: 600;
        border-bottom-width: 6px;
        border-bottom-style: solid;
        border-bottom-color: #E1C040;
    }

    .nav-line {
        height: 24px;
        width: 1px;
        background-color: #ffffff;
    }

    .tabbar {
        flex: 1;
        width: 750px;
    }
</style>

<script>
    export default {
        data() {
            return {
                position: 0,

                tabPages: [
                    {
                        tabName: 'home',
                        title: '首页',
                        url: 'http://dotwe.org/raw/dist/b5fd96d8d790f0100bdfc20b93eedf09.bundle.wx',
                    },
                    {
                        tabName: 'friend',
                        title: '好友',
                        url: 'http://dotwe.org/raw/dist/ba938c9aaebe41e5f60b98f90bd0bf61.bundle.wx',
                    },
                    {
                        tabName: 'group',
                        title: '圈子',
                        url: 'http://dotwe.org/raw/dist/fb6f016b0116969b6b503e1d3a35285f.bundle.wx',
                    },
                    {
                        tabName: 'setting',
                        title: '设置',
                        url: 'http://dotwe.org/raw/dist/ad0045a7cff0b3a680d9de6dd4806e81.bundle.wx',
                    },
                ],
            }
        },
        methods: {
            pageSelected(data) {
                this.position = data.position;
            },
            switchPage(index) {
                this.position = index;
                this.$refs.reflectName.setCurrentItem(this.tabPages[index].tabName);
            }
        }
    };
</script>