yihuo/components/tabbar2.vue

<template>
    <view class="flex-align-around" :class="[customClass, light ? 'tabs-light' : 'tabs']">
        <view
            v-for="item in tabs"
            :key="item.value"
            class="cell flex-align-around"
            :class="{ active: tab.value === item.value }"
            @click="clickTab(item)"
        >
            {{ item.title }}
        </view>
    </view>
</template>

<script>
    export default {
        props: {
            light: {
                default: false,
                type: Boolean
            },
            tabs: Array,
            initial: {
                default: 0,
                type: Number
            },
            customClass: {
                default: '',
                type: String
            }
        },
        data() {
            return {
                tab: this.tabs[this.initial]
            }
        },
        methods: {
            clickTab(item) {
                this.tab = item
                this.$emit('change', item)
            }
        }
    }
</script>
<style lang="scss" scoped>
    .tabs {
        height: 56rpx;
        .cell {
            height: 100%;
            width: 128rpx;
            position: relative;
            display: inline-block;
            font-size: 24rpx;
            color: #999999;

            background: #f3f3f8;
            border-radius: 24rpx 24rpx 0 0;
            text-align: center;
            line-height: 56rpx;
            &.active {
                color: #000;
                background-color: #fff;
            }
        }
    }

    .tabs-light {
        height: 38px;
        background: #ffffff;
        border-radius: 8px;
    }
</style>