frontend-app/components/custom-tab-bar.vue

<template>
	<view class="custom-tab-bar">
	    <view v-for="(item, index) in tabs" :key="index" class="tab-item" @click="switchTab(index)">
	      <image :src="tabIndex === index ? item.selectedIconPath:item.iconPath" class="tab-icon"></image>
	      <text :class="tabIndex === index ? 'tab-text tab-text-sel':'tab-text'">{{ item.text }}</text>
	    </view>
	  </view>
</template>

<script>
	export default {
		name:"custom-tab-bar",
		props: {
		    tabIndex: { //当前选中的tab项
		        type: Number,
		        default: 0
		    }
		},
		data() {
			return {
				tabs: [
					{
						"pagePath": "/pages/home/home",
						"text": "首页",
						"iconPath": "/static/column/home.png",
						"selectedIconPath": "/static/column/home_sel.png"
					},
					{
						"pagePath": "/pages/sort/sort",
						"text": "分类",
						"iconPath": "/static/column/sort.png",
						"selectedIconPath": "/static/column/sort_sel.png"
					}, 
					// {
					// 	"pagePath": "/pages/hash_union/hash_union",
					// 	"text": "哈希联盟",
					// 	"iconPath": "/static/column/hx.png",
					// 	"selectedIconPath": "/static/column/hx_sel.png"
					// }, 
					{
						"pagePath": "/pages/supply_chain/supply_chain",
						"text": "供应链",
						"iconPath": "/static/column/supply_chain.png",
						"selectedIconPath": "/static/column/supply_chain_sel.png"
					}, 
					{
						"pagePath": "/pages/shopping_cart/shopping_cart",
						"text": "购物车",
						"iconPath": "/static/column/shopping.png",
						"selectedIconPath": "/static/column/shopping_sel.png"
					}, {
						"pagePath": "/pages/mine/mine",
						"text": "我的",
						"iconPath": "/static/column/mine.png",
						"selectedIconPath": "/static/column/mine_sel.png"
					}
				]
			};
		},
		methods: {
		    switchTab(index) {
		      const pagePath = this.tabs[index].pagePath;
		      uni.switchTab({ url: pagePath });
		    }
		}
	}
</script>

<style lang="scss" scoped>
.custom-tab-bar {
	position: fixed;
	display: flex;
	justify-content: space-around;
	align-items: center;
	height: 140rpx; /* 根据需要调整 */
	background-color: #fff; /* 背景颜色 */
	bottom: 0;
	width: 100%;
}
.tab-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.tab-icon {
  width: 24px; /* 图标大小 */
  height: 24px; /* 图标大小 */
}
.tab-text {
  font-size: 12px; /* 文字大小 */
}
.tab-text-sel {
  color: $app-bt-bj;
}
</style>