EpicSoul/components/CustomTabBar.vue

<template>
    <view class="custom-tab-bar">
        <view class="tab-item" v-for="(item,i) in tabBarList" :key="i"  @click="switchTab(i)">
            <text :style="{ 'color': currentTab === i?item.selectColor:'#fff' }">{{ item.text }}</text>
        </view>
    </view>
</template>

<script>
export default {
	props: {
		currentTab: {
			type: Number,
			default: 0
		}
	},
    data() {
        return {
                tabBarList: [
                    {
                        "pagePath": "pages/index/index",
						"selectColor": "#00FF00",
                        "text": "首页"
                    },
                    {
                        "pagePath": "pages/index/readingBody",
						"selectColor": "#00FF00",
                        "text": "阅读体"
                    },
                    {
                        "pagePath": "pages/index/sensoryStore",
						"selectColor": "#00FF00",
                        "text": "有感商店"
                    },
                    {
                        "pagePath": "pages/index/intelligentAgent",
						"selectColor": "#00FFFF",
                        "text": "智能体"
                    },
                    {
                        "pagePath": "pages/index/iSoul",
						"selectColor": "#00FF00",
                        "text": "iSoul"
                    }
                ]
   
        };
    },
    onLoad() {
        this.getCurrentTab();
    },
    methods: {
        getCurrentTab() {
            const pages = getCurrentPages();
            const currentPage = pages[pages.length - 1];
            const currentPath = currentPage.route;
            this.tabBarList.forEach((item, index) => {
                if (item.pagePath === currentPath) {
                    this.currentTab = index;
                }
            });
        },
        switchTab(index) {
            if (this.currentTab === index) return;
            uni.switchTab({
                url: '/' + this.tabBarList[index].pagePath
            });
        }
    }
};
</script>

<style scoped>
.custom-tab-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 123rpx;
	z-index: 30;
	background: #989898;
}

.tab-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
	flex-shrink: 0;
	height: 100%;
}


.tab-item text {
    font-size: 31rpx;
}
</style>