ks-app-employment-service/components/tabbar/midell-box.vue

<template>
    <view class="tabbar_container">
        <view class="tabbar_item" v-for="(item, index) in tabbarList" :key="index" @click="changeItem(item)">
            <view
                class="item-top"
                :class="[
                    item.centerItem ? 'center-item-img ' : '',
                    item.centerItem && currentItem === item.id ? 'rubberBand animated' : '',
                ]"
            >
                <image :src="currentItem == item.id ? item.selectedIconPath : item.iconPath"></image>
            </view>
            <view class="item-bottom" :class="[currentItem == item.id ? 'item-active' : '']">
                <text>{{ item.text }}</text>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            currentItem: 0,
            tabbarList: [
                {
                    id: 0,
                    text: '首页',
                    path: '/pages/index/index',
                    iconPath: '../../static/tabbar/calendar.png',
                    selectedIconPath: '../../static/tabbar/calendared.png',
                    centerItem: false,
                },
                {
                    id: 1,
                    text: '招聘会',
                    path: '/pages/careerfair/careerfair',
                    iconPath: '../../static/tabbar/post.png',
                    selectedIconPath: '../../static/tabbar/posted.png',
                    centerItem: false,
                },
                {
                    id: 2,
                    text: '',
                    path: '/pages/chat/chat',
                    iconPath: '../../static/tabbar/logo3.png',
                    selectedIconPath: '../../static/tabbar/logo3.png',
                    centerItem: true,
                },
                {
                    id: 3,
                    text: '消息',
                    path: '/pages/msglog/msglog',
                    iconPath: '../../static/tabbar/chat4.png',
                    selectedIconPath: '../../static/tabbar/chat4ed.png',
                    centerItem: false,
                },
                {
                    id: 4,
                    text: '我的',
                    path: '/pages/mine/mine',
                    iconPath: '../../static/tabbar/mine.png',
                    selectedIconPath: '../../static/tabbar/mined.png',
                    centerItem: false,
                },
            ],
        };
    },
    props: {
        currentpage: {
            type: Number,
            required: true,
            default: 0,
        },
    },
    mounted() {
        this.currentItem = this.currentpage;
        uni.hideTabBar();
    },
    methods: {
        changeItem(item) {
            uni.switchTab({
                url: item.path,
            });
        },
    },
};
</script>

<style lang="scss" scoped>
.tabbar_container {
    background-color: #ffffff;
    width: 100%;
    height: 88rpx;
    display: flex;
    align-items: center;
    padding: 5rpx 0;
    overflow: hidden;
    // position: fixed;
    // bottom: 0rpx;
    // left: 0rpx;
    // box-shadow: 0 0 5px #999;
    // padding-bottom: env(safe-area-inset-bottom);
    // z-index: 998;
    .tabbar_item {
        width: 33.33%;
        height: 100rpx;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
        position: relative;
        color: #5e5f60;
        .item-top {
            width: 44.44rpx;
            height: 44.44rpx;
            image {
                width: 100%;
                height: 100%;
            }
        }
        .item-bottom {
            font-weight: 500;
            font-size: 22rpx;
        }
    }
}
.center-item-img {
    // position: absolute;
    // top: 0rpx;
    // left: 50%;
    // transform: translate(-50%, 0);
    width: 108rpx !important;
    height: 98rpx !important;
}
.item-active {
    color: #256bfa;
}
</style>