因小程序不支持uni默认的动态tabbar, 因此将tabbar单独抽离出来做成组件

App.vue

@@ -6,6 +6,7 @@
 		},
 		onShow: function() {
 			console.log('App Show')
+			uni.hideTabBar();
 		},
 		onHide: function() {
 			console.log('App Hide')

components/tabbar/tabbar.vue

@@ -0,0 +1,130 @@
+<template>
+	<view class="tab_bar">
+		<view class="tabbarBox">
+			<view class="handleBox" v-for="(item,index) in tabBarList" :key="index">
+				<view class="menuBox" @click="goPages(item.pageIndex)">
+					<view class="menuIcon">
+						<image v-if="item.type!=selectIndex" class="img"                 :src="item.iconPath"></image>
+						<image v-else class="img" :src="item.selectIconPath"></image>
+					</view>
+					<view class="menuName">
+						<text :class="item.type==selectIndex?'TextColor':'Text'" >{{item.tabbarName}}</text>
+					</view>
+				</view>
+			</view>
+		</view>
+		
+	</view>
+</template>
+ 
+<script>
+export default {
+	props: {
+		page: {
+			type: String,
+			default: "homeIndex"
+		}
+	},
+	watch: {
+		page: {
+			handler(value) {
+				this.selectIndex = value;
+			},
+			immediate: true,
+			deep: true
+		}
+	},
+	data() {
+		return {
+			selectIndex: "",
+			tabBarList: [],
+		}
+		
+	},
+	//uniapp子组件不支持应用生命周期，所以只能用vue生命周期
+	created() {
+ 
+        //tabbar数据，这儿也支持后台定义通过接口获取数据
+    //     this.tabBarList = [{
+    // 			"tabbarName":"", //tababr名称
+				// "iconPath":"", //tabbar icon
+				// "selectIconPath":"", //tabbar 选择icon
+				// "pageIndex":"" //页面路径
+    //         }]
+	this.listTabbar();
+	},methods: {
+		listTabbar() {
+			this.$api.listTabbar({})
+				.then(res => {
+					console.log(res)
+					for (var i = 0; i < res.data.length; i++) {
+						if (res.data[i].hide == 1) {
+							this.tabBarList.push({
+								"tabbarName": res.data[i].title, 
+								"iconPath": res.data[i].selectedIconPath, 
+								"selectIconPath": res.data[i].selectedIconPath,
+								"pageIndex": res.data[i].pagePath,
+								"type": res.data[i].type
+							});
+						}
+					}
+				}).catch((e) => console.log(e)); //捕获异常
+		},
+		//进入tabble页
+		goPages(pageIndex) {
+			uni.switchTab({
+				url:"/"+pageIndex
+			})
+		},
+		
+	},
+}
+</script>
+<style lang="scss">
+.tab_bar {
+	width: 100vw;
+	height: 120rpx;
+	position: fixed;
+	bottom: 30rpx;
+	/* 模糊大小就是靠的blur这个函数中的数值大小 */
+	backdrop-filter: blur(10px);
+	border-radius: 60rpx;
+		
+.tabbarBox {
+	display: flex;
+	margin-top: 10rpx;
+	justify-content: space-evenly;
+	
+	
+.handleBox {
+	width: 20vw;
+	height: 110rpx;
+	
+ 
+.menuBox {
+	padding: 0rpx 20rpx;
+	width: 120rpx;
+	height: 98%;
+	text-align: center;
+ 
+.img {
+	width: 50rpx;
+	height: 50rpx;
+	}
+}
+	}
+}
+	}
+ 
+.Text {
+	font-size: 24rpx;
+	font-family: Cochin, serif;
+	font-weight: 900;
+}
+ 
+.TextColor {
+	@extend .Text;
+	color: #d81e06;
+}
+ 
+</style>

pages.json

@@ -60,23 +60,23 @@
 	"tabBar": {
 		"selectedColor": "#009eff",
 		"list": [{
-				"pagePath": "pages/index/index",
+				"pagePath": "pages/index/index"
-				"text": "首页",
+				// "text": "首页",
-				"iconPath": "static/tab_icons/home.png"
+				// "iconPath": "static/tab_icons/home.png"
 			},
 			{
-				"pagePath": "pages/scan/scan",
+				"pagePath": "pages/scan/scan"
-				"text": "扫一扫",
+				// "text": "扫一扫",
-				"iconPath": "static/tab_icons/cate.png"
+				// "iconPath": "static/tab_icons/cate.png"
 			},
 			{
-				"pagePath": "pages/knowledge/knowledge",
+				"pagePath": "pages/knowledge/knowledge"
-				"text": "知识库",
+				// "text": "知识库",
-				"iconPath": "static/tab_icons/knownledge.png"
+				// "iconPath": "static/tab_icons/knownledge.png"
 			}, {
-				"pagePath": "pages/my/my",
+				"pagePath": "pages/my/my"
-				"text": "我的",
+				// "text": "我的",
-				"iconPath": "static/tab_icons/my.png"
+				// "iconPath": "static/tab_icons/my.png"
 			}
 		]
 	}

pages/index/index.vue

@@ -16,15 +16,19 @@
 				<image :src="item" class="scene-img"></image>
 			</view>
 		</view>
+		
+		<tabbar :page="page"></tabbar>
 	</view>
 </template>
 
 <script>
+	import tabbar from "@/components/tabbar/tabbar.vue";
 	import { mapMutations, mapState } from 'vuex'
 	export default {
 		
 		data() {
 			return {
+				page: "",
 				//顶部图片
 				topImg: "",
 				leftImg: "",
@@ -39,65 +43,13 @@
 		  ...mapState('m_user', ['token'])
 		},
 		onLoad() {
-			uni.setTabBarItem({
-				index: 1,
-				"visible": false
-			});
-			uni.setTabBarItem({
-				index: 2,
-				"visible": false
-			});
-			uni.setTabBarItem({
-				index: 3,
-				"visible": false
-			});
-			uni.setTabBarItem({
-				index: 4,
-				"visible": false
-			});
-			this.listTabbar();
 			this.getSwiperList();
-			this.checkLogin()
+			// this.checkLogin()
 		},
-		methods: {
+		onShow() {
-			listTabbar() {
+			this.page= "home"
-				this.$api.listTabbar({})
-					.then(res => {
-						console.log(res)
-						for (var i = 0; i < res.data.length; i++) {
-							if (res.data[i].hide == 1) {
-								if (res.data[i].type == "home") {
-									uni.setTabBarItem({
-										index: 0,
-										text: res.data[i].title,
-										"visible": true
-									});
-								}
-								if (res.data[i].type == "scan") {
-									uni.setTabBarItem({
-										index: 1,
-										text: res.data[i].title,
-										"visible": true
-									});
-								}
-								if (res.data[i].type == "know") {
-									uni.setTabBarItem({
-										index: 2,
-										text: res.data[i].title,
-										"visible": true
-									});
-								}
-								if (res.data[i].type == "my") {
-									uni.setTabBarItem({
-										index: 3,
-										text: res.data[i].title,
-										"visible": true
-									});
-								}
-							}
-						}
-					}).catch((e) => console.log(e)); //捕获异常
 		},
+		methods: {
 
 			async getSwiperList() {
 
@@ -132,7 +84,8 @@
 			   }
 			},
 			
-		}
+		},
+		components: {tabbar}
 	}
 </script>
 

pages/knowledge/knowledge.vue

@@ -1,16 +1,23 @@
 <template>
 	<view>
 		知识库页面
+		
+		<tabbar :page="page"></tabbar>
 	</view>
 </template>
 
 <script>
+	import tabbar from "@/components/tabbar/tabbar.vue";
 	export default {
 		data() {
 			return {
-				
+				page: "",
 			};
-		}
+		},
+		onShow() {
+			this.page= "know"
+		},
+		components: {tabbar}
 	}
 </script>
 

pages/my/my.vue

@@ -45,14 +45,21 @@
 				</view>
 			</view>
 		</view>
+
+		<tabbar :page="page"></tabbar>
 	</view>
 </template>
 
 <script>
-	import { mapState, mapMutations } from 'vuex'
+	import tabbar from "@/components/tabbar/tabbar.vue";
+	import {
+		mapState,
+		mapMutations
+	} from 'vuex'
 	export default {
 		data() {
 			return {
+				page: "",
 				avatarUrl: uni.$http.baseUrl + "/profile//2024/01/18/6147d64a3b94d7b3d3cc35aaf8cbfe06.png",
 				//轮播图数据列表
 				swiperList: [],
@@ -64,6 +71,9 @@
 			this.getSwiperList()
 			this.getFunctionList()
 		},
+		onShow() {
+			this.page = "my"
+		},
 		computed: {
 			...mapState('m_user', ['userinfo'])
 		},
@@ -85,7 +95,9 @@
 
 				const {
 					data: res
-		  	} = await uni.$http.post('/small/customImage/listAll',{page:"my"})
+				} = await uni.$http.post('/small/customImage/listAll', {
+					page: "my"
+				})
 				if (!res.success) return uni.$showMsg()
 
 				res.data.forEach(item => {
@@ -111,6 +123,9 @@
 		navClickHandler(item) {
 
 		},
+		components: {
+			tabbar
+		}
 	}
 </script>
 
@@ -181,6 +196,7 @@
 			}
 		}
 	}
+
 	.function-img {
 		width: 30px;
 		height: 30px;
@@ -194,6 +210,7 @@
 		padding: 0 10px;
 		line-height: 45px;
 	}
+
 	swiper {
 		height: 230rpx;
 
@@ -205,4 +222,3 @@
 		}
 	}
 </style>
-

pages/scan/scan.vue

@@ -2,20 +2,26 @@
 	<view>
 		<view class="video-wrapper" id="video-container">
 		</view>
+		
+		<tabbar :page="page"></tabbar>
 	</view>
 </template>
 
 <script>
+	import tabbar from "@/components/tabbar/tabbar.vue";
 	export default {
 		
 		data() {
 			return {
-				
+				page: "",
 			};
 		},
 		onReady(){
 			this.QR();
 		},
+		onShow() {
+			this.page= "scan"
+		},
 		methods:{
 		    QR() {
 				uni.scanCode({
@@ -28,7 +34,8 @@
 				}
 			 })
 			},	
-		}
+		},
+		components: {tabbar}
 	}
 </script>