加个自定义bar底部

components/barNavigasiHandap.vue

@@ -0,0 +1,181 @@
+<template>
+	<!-- 底部导航栏 -->
+	<view class="bottom-tabbar">
+		<view class="tabbar-container">
+			
+			<view 
+				class="tab-item" 
+				:class="{ 'active': currentTab === 'index' }"
+				@click="switchTab('index')"
+			>
+				<image 
+					class="tab-icon" 
+					:src="currentTab === 'index' ? '/static/images/tabbar/home_.png' : '/static/images/tabbar/home.png'"
+					mode="aspectFit"
+				></image>
+				<text class="tab-text" :class="{ 'active-text': currentTab === 'index' }">首页</text>
+			</view>
+			
+			<view 
+				class="tab-item" 
+				:class="{ 'active': currentTab === 'mine' }"
+				@click="switchTab('mine')"
+			>
+				<image 
+					class="tab-icon" 
+					:src="currentTab === 'mine' ? '/static/images/tabbar/mine_.png' : '/static/images/tabbar/mine.png'"
+					mode="aspectFit"
+				></image>
+				<text class="tab-text" :class="{ 'active-text': currentTab === 'mine' }">我的</text>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+export default {
+	name: 'BarNavigasiHandap',
+	data() {
+		return {
+			currentTab: 'index' // 当前选中的tab
+		}
+	},
+	mounted() {
+		// 组件挂载时设置当前tab
+		this.setCurrentTab()
+		// 监听页面显示事件
+		uni.$on('pageShow', () => {
+			this.setCurrentTab()
+		})
+	},
+	beforeDestroy() {
+		// 组件销毁前移除监听
+		uni.$off('pageShow')
+	},
+	methods: {
+		// 设置当前tab
+		setCurrentTab() {
+			try {
+				const pages = getCurrentPages()
+				if (pages && pages.length > 0) {
+					const currentPage = pages[pages.length - 1]
+					const route = currentPage.route || ''
+					
+					console.log('当前路由:', route) // 调试用
+					
+					// 更精确的路由匹配
+					if (route === 'pages/index') {
+						this.currentTab = 'index'
+					} else if (route === 'pages/mine/index') {
+						this.currentTab = 'mine'
+					} else if (route.includes('mine')) {
+						// 如果路由包含 mine，也设置为 mine（处理子页面）
+						this.currentTab = 'mine'
+					} else if (route.includes('index') && !route.includes('mine')) {
+						// 如果路由包含 index 但不包含 mine，设置为 index
+						this.currentTab = 'index'
+					}
+				}
+			} catch (e) {
+				console.error('获取当前页面失败:', e)
+			}
+		},
+		// 切换tab
+		switchTab(tab) {
+			// 如果点击的是当前tab，不执行操作
+			if (this.currentTab === tab) {
+				return
+			}
+			
+			// 先更新状态，立即高亮（关键：在跳转前更新状态）
+			this.currentTab = tab
+			
+			// 跳转到对应页面（使用 reLaunch 关闭所有页面并跳转）
+			const urlMap = {
+				'index': '/pages/index',
+				'mine': '/pages/mine/index'
+			}
+			
+			const targetUrl = urlMap[tab]
+			if (targetUrl) {
+				uni.reLaunch({
+					url: targetUrl,
+					success: () => {
+						// 跳转成功后再次确认状态
+						setTimeout(() => {
+							this.setCurrentTab()
+						}, 100)
+					},
+					fail: (err) => {
+						console.error('页面跳转失败:', err)
+						// 跳转失败时恢复状态
+						this.setCurrentTab()
+					}
+				})
+			}
+		}
+	}
+}
+</script>
+
+<style scoped>
+.bottom-tabbar {
+	position: fixed;
+	bottom: 0;
+	left: 0;
+	right: 0;
+	width: 100%;
+	background-color: #F5F5F5;
+	padding: 16rpx 24rpx;
+	padding-bottom: calc(16rpx + env(safe-area-inset-bottom));
+	z-index: 9999;
+	box-sizing: border-box;
+}
+
+.tabbar-container {
+	display: flex;
+	justify-content: space-evenly;
+	align-items: center;
+	width: 344rpx;
+	margin: auto;
+	height: 115rpx;
+	background: #FFFFFF;
+	box-shadow: 0rpx 8rpx 38rpx 0rpx rgba(40,86,199,0.2);
+	border-radius: 57rpx 57rpx 57rpx 57rpx;
+	
+}
+
+.tab-item {
+	font-weight: 500;
+	font-size: 23rpx;
+	color: #AAAAAA;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	min-height: 100rpx;
+}
+
+.tab-item.active {
+	font-size: 23rpx;
+	color: #323232;
+}
+
+.tab-icon {
+	width: 44rpx;
+	height: 44rpx;
+	margin-bottom: 6rpx;
+}
+
+.tab-text {
+	font-size: 26rpx;
+	color: #999999;
+	transition: color 0.3s ease;
+	line-height: 1;
+}
+
+.tab-text.active-text {
+	color: #323232;
+	font-weight: 500;
+}
+</style>

pages.json

@@ -15,7 +15,20 @@
       "navigationBarTitleText": "若依移动端框架",
       "navigationStyle": "custom"
     }
-  }, {
+  }, 
+  {
+	  "path": "pages/index",
+	  "style": {
+		"navigationBarTitleText": "首页"
+	  }  
+  },
+  {
+	"path": "pages/mine/index",
+	"style": {
+	  "navigationBarTitleText": "我的"
+	}  
+  },
+  {
     "path": "pages/work/index",
     "style": {
       "navigationBarTitleText": "工作台"
@@ -71,29 +84,29 @@
       "navigationBarTitleText": "浏览文本"
     }
   }],
-  "tabBar": {
-    "color": "#000000",
-    "selectedColor": "#000000",
-    "borderStyle": "white",
-    "backgroundColor": "#ffffff",
-    "list": [{
-        "pagePath": "pages/index",
-        "iconPath": "static/images/tabbar/home.png",
-        "selectedIconPath": "static/images/tabbar/home_.png",
-        "text": "首页"
-      }, {
-        "pagePath": "pages/work/index",
-        "iconPath": "static/images/tabbar/work.png",
-        "selectedIconPath": "static/images/tabbar/work_.png",
-        "text": "工作台"
-      }, {
-        "pagePath": "pages/mine/index",
-        "iconPath": "static/images/tabbar/mine.png",
-        "selectedIconPath": "static/images/tabbar/mine_.png",
-        "text": "我的"
-      }
-    ]
-  },
+  // "tabBar": {
+  //   "color": "#000000",
+  //   "selectedColor": "#000000",
+  //   "borderStyle": "white",
+  //   "backgroundColor": "#ffffff",
+  //   "list": [{
+  //       "pagePath": "pages/index",
+  //       "iconPath": "static/images/tabbar/home.png",
+  //       "selectedIconPath": "static/images/tabbar/home_.png",
+  //       "text": "首页"
+  //     }, {
+  //       "pagePath": "pages/work/index",
+  //       "iconPath": "static/images/tabbar/work.png",
+  //       "selectedIconPath": "static/images/tabbar/work_.png",
+  //       "text": "工作台"
+  //     }, {
+  //       "pagePath": "pages/mine/index",
+  //       "iconPath": "static/images/tabbar/mine.png",
+  //       "selectedIconPath": "static/images/tabbar/mine_.png",
+  //       "text": "我的"
+  //     }
+  //   ]
+  // },
   "globalStyle": {
     "navigationBarTextStyle": "black",
     "navigationBarTitleText": "RuoYi",

pages/index.vue

@@ -1,36 +1,21 @@
 <template>
-  <view class="content">
-    <image class="logo" src="@/static/logo.png"></image>
-    <view class="text-area">
-      <text class="title">Hello RuoYi</text>
-    </view>
+  <view class="page">
+     <!-- 底部导航栏 - 放在 content 外面，确保固定在底部 -->
+	 <bar-navigasi-handap></bar-navigasi-handap>
   </view>
-</template>
-
-<style scoped>
-  .content {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-  }
 
-  .logo {
-    height: 200rpx;
-    width: 200rpx;
-    margin-top: 200rpx;
-    margin-left: auto;
-    margin-right: auto;
-    margin-bottom: 50rpx;
-  }
+ 
+</template>
 
-  .text-area {
-    display: flex;
-    justify-content: center;
-  }
+<script>
+import BarNavigasiHandap from "@/components/barNavigasiHandap.vue"
 
-  .title {
-    font-size: 36rpx;
-    color: #8f8f94;
+export default {
+  components: {
+    BarNavigasiHandap
   }
+}
+</script>
+<style scoped>
+  
 </style>

pages/mine/index.vue

@@ -73,11 +73,18 @@
       </view>
 
     </view>
+	
+	<!-- 底部导航栏 - 放在 content 外面，确保固定在底部 -->
+	<bar-navigasi-handap></bar-navigasi-handap>
   </view>
 </template>
 
 <script>
+  import BarNavigasiHandap from "@/components/barNavigasiHandap.vue"
   export default {
+	components: {
+	  BarNavigasiHandap
+	},
     data() {
       return {
         name: this.$store.state.user.name