底部安全距离

src/custom-tab-bar/index.tsx

@@ -5,7 +5,6 @@ import PublishPopup from '@/components/PublishPopup'
 import type { PublishOption } from '@/components/PublishPopup'
 import './index.less'
 
-/** Tab 项配置（顺序与 app.config.ts tabBar.list 一致） */
 interface TabItem {
   key: string
   label: string
@@ -21,13 +20,32 @@ const TAB_LIST: TabItem[] = [
 ]
 
 interface CustomTabBarProps {
-  /** 当前激活的 tab key，由页面传入 */
-  activeKey: string
+  /** 当前激活的 tab key。H5 由页面传入；小程序由 Taro 自动渲染，props 为空 */
+  activeKey?: string
+}
+
+/**
+ * 从小程序路由推导激活 tab（Taro 自动渲染 custom-tab-bar 时不传 props）
+ */
+function deriveActiveKey(): string {
+  try {
+    const pages = Taro.getCurrentPages()
+    if (pages.length > 0) {
+      const route = pages[pages.length - 1]?.route || ''
+      for (const tab of TAB_LIST) {
+        if (route.includes(tab.key + '/index')) return tab.key
+      }
+    }
+  } catch { /* ignore */ }
+  return 'index'
 }
 
 /** 获取底部安全距离 */
 function getSafeBottom(): number {
   try {
+    if(process.env.TARO_ENV === 'h5') {
+      return 0
+    }
     const info = Taro.getSystemInfoSync()
     if (info.safeArea) {
       return info.screenHeight - info.safeArea.bottom
@@ -36,7 +54,9 @@ function getSafeBottom(): number {
   return 0
 }
 
-export default function CustomTabBar({ activeKey }: CustomTabBarProps) {
+export default function CustomTabBar({ activeKey: propKey }: CustomTabBarProps) {
+  // H5 走 props，小程序自动渲染时无 props，从路由推导
+  const activeKey = propKey || deriveActiveKey()
   const safeBottom = getSafeBottom()
   const [publishVisible, setPublishVisible] = useState(false)
 

src/pages/index/index.config.ts

@@ -2,4 +2,5 @@ export default definePageConfig({
   navigationBarTitleText: '首页',
   navigationStyle: 'custom',
   enablePullDownRefresh: false,
+  usingComponents: {},
 })

src/pages/index/index.tsx

@@ -165,7 +165,7 @@ export default function Index() {
         <View className='bottom-safe' />
       </ScrollView>
 
-      <CustomTabBar activeKey='index' />
+      {/*<CustomTabBar activeKey='index' />*/}
     </View>
   )
 }

src/pages/messages/index.config.ts

@@ -1,4 +1,4 @@
 export default definePageConfig({
   navigationBarTitleText: '消息',
-  navigationStyle: 'custom',
+  usingComponents: {},
 })

src/pages/messages/index.tsx

@@ -1,7 +1,6 @@
 import Taro from '@tarojs/taro'
 import { View, Text, Image, ScrollView } from '@tarojs/components'
 import { Badge } from '@antmjs/vantui'
-import CustomTabBar from '@/custom-tab-bar'
 import { chatList } from '@/mock/messages'
 import type { ChatItem } from '@/types/message'
 import './index.less'
@@ -86,7 +85,7 @@ export default function Messages() {
 
               {/* 未读数 */}
               {msg.unread ? (
-                <Badge content={msg.unread} max={99} />
+                <Badge content={msg.unread} />
               ) : null}
             </View>
           ))}
@@ -94,8 +93,6 @@ export default function Messages() {
 
         <View className='bottom-safe' />
       </ScrollView>
-
-      <CustomTabBar activeKey='messages' />
     </View>
   )
 }

src/pages/profile/index.config.ts

@@ -1,4 +1,5 @@
 export default definePageConfig({
   navigationBarTitleText: '我的',
   navigationStyle: 'custom',
+  usingComponents: {},
 })

src/pages/profile/index.tsx

@@ -2,7 +2,6 @@ import { useMemo } from 'react'
 import Taro from '@tarojs/taro'
 import { View, Text, Image, ScrollView } from '@tarojs/components'
 import { Cell, CellGroup, Icon } from '@antmjs/vantui'
-import CustomTabBar from '@/custom-tab-bar'
 import './index.less'
 
 /** 状态栏高度 */
@@ -155,9 +154,6 @@ export default function Profile() {
           <Text className='footer-version'>校园通 v1.0.0</Text>
         </View>
       </ScrollView>
-
-      {/* ========== TabBar ========== */}
-      <CustomTabBar activeKey='profile' />
     </View>
   )
 }

src/pages/tasks/index.config.ts

@@ -1,5 +1,4 @@
 export default definePageConfig({
   navigationBarTitleText: '校园任务',
-  navigationStyle: 'custom',
-  "usingComponents": {}
+  usingComponents: {},
 })

src/pages/tasks/index.tsx

@@ -1,11 +1,9 @@
 import { useState, useMemo } from 'react'
 import Taro from '@tarojs/taro'
 import { View, ScrollView } from '@tarojs/components'
-import { Search, Tabs, Tab } from '@antmjs/vantui'
+import { Search } from '@antmjs/vantui'
 import TaskCard from '@/components/TaskCard'
-import CustomTabBar from '@/custom-tab-bar'
 import { tasks } from '@/mock/tasks'
-import type { TaskType } from '@/types/task'
 import './index.less'
 
 /** 筛选标签 */
@@ -100,8 +98,6 @@ export default function Tasks() {
         </View>
         <View className='bottom-safe' />
       </ScrollView>
-
-      <CustomTabBar activeKey='tasks' />
     </View>
   )
 }