feat(h5): tabBar set midButton

packages/uni-cli-shared/src/json/pages.ts

@@ -426,26 +426,6 @@ function normalizeTabBar(
     return
   }
   tabBar = extend({}, DEFAULT_TAB_BAR, tabBar)
-  if (platform === 'h5') {
-    const len = list.length
-    if (len % 2 === 0 && isPlainObject(midButton)) {
-      list.splice(
-        Math.floor(len / 2),
-        0,
-        extend(
-          {
-            type: 'midButton',
-            width: '50px',
-            height: '50px',
-            iconWidth: '24px',
-          },
-          midButton
-        )
-      )
-    } else {
-      delete tabBar.midButton
-    }
-  }
   list.forEach((item) => {
     if (item.iconPath) {
       item.iconPath = normalizeFilepath(item.iconPath)
@@ -453,10 +433,10 @@ function normalizeTabBar(
     if (item.selectedIconPath) {
       item.selectedIconPath = normalizeFilepath(item.selectedIconPath)
     }
-    if (item.type === 'midButton' && item.backgroundImage) {
-      item.backgroundImage = normalizeFilepath(item.backgroundImage)
-    }
   })
+  if (midButton && midButton.backgroundImage) {
+    midButton.backgroundImage = normalizeFilepath(midButton.backgroundImage)
+  }
   tabBar.selectedIndex = 0
   tabBar.shown = true
   return tabBar

packages/uni-h5/src/framework/components/layout/tabBar.tsx

@@ -7,6 +7,7 @@ import {
   onMounted,
   reactive,
 } from 'vue'
+import { extend } from '@vue/shared'
 import { RouteLocationNormalizedLoaded, useRoute } from 'vue-router'
 import { invokeHook, updatePageCssVar } from '@dcloudio/uni-core'
 import {
@@ -24,6 +25,12 @@ import { parseTheme, onThemeChange } from '../../../helpers/theme'
 
 const UNI_TABBAR_ICON_FONT = 'UniTabbarIconFont'
 
+const _middleButton = {
+  width: '50px',
+  height: '50px',
+  iconWidth: '24px',
+}
+
 export default /*#__PURE__*/ defineSystemComponent({
   name: 'TabBar',
   setup() {
@@ -89,18 +96,27 @@ function useVisibleList(
   tabBar: UniApp.TabBarOptions,
   visibleList: Ref<UniApp.TabBarItemOptions[]>
 ) {
+  const internalMidButton = ref<UniApp.TabBarMidButtonOptions>(
+    extend({ type: 'midButton' }, tabBar.midButton)
+  )
   function setVisibleList() {
     let tempList = []
     tempList = tabBar.list.filter((item) => item.visible !== false)
 
-    if (__UNI_FEATURE_TABBAR_MIDBUTTON__) {
+    if (__UNI_FEATURE_TABBAR_MIDBUTTON__ && tabBar.midButton) {
+      internalMidButton.value = extend(
+        {},
+        _middleButton,
+        internalMidButton.value,
+        tabBar.midButton
+      )
       tempList = tempList.filter((item) => !isMidButton(item))
 
       if (tempList.length % 2 === 0) {
         tempList.splice(
           Math.floor(tempList.length / 2),
           0,
-          tabBar.list[Math.floor(tabBar.list.length / 2)]
+          internalMidButton.value
         )
       }
     }

packages/uni-h5/src/service/api/ui/tabBar.ts

@@ -48,6 +48,7 @@ const setTabBarStyleProps = [
   'selectedColor',
   'backgroundColor',
   'borderStyle',
+  'midButton',
 ]
 const setTabBarBadgeProps = ['badge', 'redDot']