소스 검색

♻️ refactor(tabbar): optimize tab bar navigation implementation
- 移除动态导入 Taro,改为直接导入以简化代码
- 优化导航逻辑,提升页面切换性能

🔧 chore(config): update project configuration
- babel.config.js 添加 targets 配置,指定 ios: '8' 和 android: '4.1' 兼容性
- babel.config.js 启用 forceAllTransforms 选项增强兼容性处理
- project.config.json 关闭 es6 转译功能
- app.config.ts 添加 tabBar 颜色配置和 usingComponents 字段

yourname 4 달 전
부모
커밋
464524f8ec
4개의 변경된 파일26개의 추가작업 그리고 19개의 파일을 삭제
  1. 6 1
      mini/babel.config.js
  2. 1 1
      mini/project.config.json
  3. 5 1
      mini/src/app.config.ts
  4. 14 16
      mini/src/layouts/tab-bar-layout.tsx

+ 6 - 1
mini/babel.config.js

@@ -6,7 +6,12 @@ module.exports = {
       framework: 'react',
       ts: true,
       compiler: 'webpack5',
+      targets: {  
+        ios: '8',  
+        android: '4.1'  
+      },  
+      forceAllTransforms: true,
       useBuiltIns: process.env.TARO_ENV === 'h5' ? 'usage' : false
     }]
   ]
-}
+}

+ 1 - 1
mini/project.config.json

@@ -5,7 +5,7 @@
   "appid": "wx6765e6b2fe06378c",
   "setting": {
     "urlCheck": false,
-    "es7": true,
+    "es6": false,
     "enhance": false,
     "compileHotReLoad": false,
     "postcss": false,

+ 5 - 1
mini/src/app.config.ts

@@ -15,6 +15,9 @@ export default defineAppConfig({
   },
   tabBar: {
     custom: true,
+    color: "#000000",
+    selectedColor: "#000000",
+    backgroundColor: "#000000",
     list: [
       {
         pagePath: 'pages/index/index',
@@ -29,5 +32,6 @@ export default defineAppConfig({
         text: '我的'
       }
     ]
-  }
+  },
+  usingComponents: {}
 })

+ 14 - 16
mini/src/layouts/tab-bar-layout.tsx

@@ -1,7 +1,7 @@
 import React, { ReactNode } from 'react'
 import { View } from '@tarojs/components'
 import { TabBar, TabBarItem } from '@/components/ui/tab-bar'
-import { useRouter } from '@tarojs/taro'
+import Taro from '@tarojs/taro'
 
 export interface TabBarLayoutProps {
   children: ReactNode
@@ -32,21 +32,19 @@ const tabBarItems: TabBarItem[] = [
 export const TabBarLayout: React.FC<TabBarLayoutProps> = ({ children, activeKey }) => {
   const handleTabChange = (key: string) => {
     // 使用 Taro 的导航 API 进行页面跳转
-    import('@tarojs/taro').then(({ default: Taro }) => {
-      switch (key) {
-        case 'home':
-          Taro.switchTab({ url: '/pages/index/index' })
-          break
-        case 'explore':
-          Taro.switchTab({ url: '/pages/explore/index' })
-          break
-        case 'profile':
-          Taro.switchTab({ url: '/pages/profile/index' })
-          break
-        default:
-          break
-      }
-    })
+    switch (key) {
+      case 'home':
+        Taro.switchTab({ url: '/pages/index/index' })
+        break
+      case 'explore':
+        Taro.switchTab({ url: '/pages/explore/index' })
+        break
+      case 'profile':
+        Taro.switchTab({ url: '/pages/profile/index' })
+        break
+      default:
+        break
+    }
   }
 
   return (