feat(h5): add custom-tab-bar

src/platforms/h5/components/app/customTabBar.vue

+<template>
+  <uni-tabbar
+    v-if="hasTabBar"
+    v-show="showTabBar"
+  >
+    <div
+      :style="{'flex-direction':direction==='vertical'?'column':'row',backgroundColor:tabBarOptions.backgroundColor}"
+      class="uni-tabbar"
+    >
+      <div
+        v-for="(item,index) in tabBarOptions.list"
+        :key="item.pagePath"
+        class="uni-tabbar__item"
+        @click="_switchTab(item,index)"
+      >
+        <div class="uni-tabbar__bd">
+          <div
+            v-if="showIcon && item.iconPath"
+            :class="{'uni-tabbar__icon__diff':!item.text}"
+            class="uni-tabbar__icon"
+          >
+            <img :src="_getRealPath(selectedIndex===index?item.selectedIconPath:item.iconPath)">
+            <div
+              v-if="item.redDot"
+              :class="{'uni-tabbar__badge':!!item.badge}"
+              class="uni-tabbar__reddot"
+            >
+              {{ item.badge }}
+            </div>
+          </div>
+          <div
+            v-if="item.text"
+            :style="{color:selectedIndex===index?tabBarOptions.selectedColor:tabBarOptions.color,fontSize:showIcon&&item.iconPath?'10px':'14px'}"
+            class="uni-tabbar__label"
+          >
+            {{ item.text }}
+            <div
+              v-if="item.redDot&&(!showIcon || !item.iconPath)"
+              :class="{'uni-tabbar__badge':!!item.badge}"
+              class="uni-tabbar__reddot"
+            >
+              {{ item.badge }}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </uni-tabbar>
+</template>
+
+<script>
+import getRealPath from 'uni-platform/helpers/get-real-path'
+import {
+  tabBar
+} from './observable'
+export default {
+  name: 'CustomTabBar',
+  props: {
+    selected: {
+      type: Number,
+      default: 0
+    },
+    showIcon: {
+      type: Boolean,
+      default: true
+    },
+    direction: {
+      type: String,
+      default: 'horizontal'
+    }
+  },
+  data () {
+    return {
+      selectedIndex: this.selected
+    }
+  },
+  computed: {
+    tabBarOptions () {
+      return tabBar
+    },
+    hasTabBar () {
+      return tabBar.list && tabBar.list.length
+    },
+    showTabBar () {
+      const app = getApp()
+      if (app) {
+        return !app.$children[0].hideTabBar
+      }
+      return true
+    }
+  },
+  methods: {
+    _getRealPath (filePath) {
+      if (filePath.indexOf('/') !== 0) {
+        filePath = '/' + filePath
+      }
+      return getRealPath(filePath)
+    },
+    _switchTab ({
+      text,
+      pagePath
+    }, index) {
+      this.selectedIndex = index
+      let url = '/' + pagePath
+      if (url === __uniRoutes[0].alias) {
+        url = '/'
+      }
+      const detail = {
+        index,
+        text,
+        pagePath
+      }
+      this.$emit('onTabItemTap', detail)
+      if (this.$route.path === url) {
+        UniServiceJSBridge.emit('onTabItemTap', detail)
+      }
+    }
+  }
+}
+</script>
+
+<style>
+</style>

src/platforms/h5/components/app/index.vue

@@ -9,7 +9,7 @@
     <tab-bar
       v-if="hasTabBar"
       v-show="showTabBar"
-      v-bind="tabBar"
+      v-bind="tabBarOptions"
     />
     <toast
       v-if="$options.components.Toast"
@@ -47,6 +47,10 @@ import components from './components'
 
 import mixins from 'uni-h5-app-mixins'
 
+import {
+  tabBar
+} from './observable'
+
 export default {
   name: 'App',
   components,
@@ -63,7 +67,6 @@ export default {
     return {
       transitionName: 'fade',
       hideTabBar: false,
-      tabBar: __uniConfig.tabBar || {},
       sysComponents: this.$sysComponents,
       showMaxWidth: false
     }
@@ -72,8 +75,11 @@ export default {
     key () {
       return this.$route.meta.name + '-' + this.$route.params.__id__ + '-' + (__uniConfig.reLaunch || 1)
     },
+    tabBarOptions () {
+      return tabBar
+    },
     hasTabBar () {
-      return __uniConfig.tabBar && __uniConfig.tabBar.list && __uniConfig.tabBar.list.length
+      return tabBar.list && tabBar.list.length
     },
     showTabBar () {
       return this.$route.meta.isTabBar && !this.hideTabBar

src/platforms/h5/components/app/observable.js

+import Vue from 'vue'
+__uniConfig.tabBar = Vue.observable(__uniConfig.tabBar || {})
+export const tabBar = __uniConfig.tabBar

src/platforms/h5/components/app/tabBar.vue

 <template>
-  <uni-tabbar>
+  <uni-tabbar :class="['uni-tabbar-'+position]">
     <div
       :style="{backgroundColor:backgroundColor}"
       class="uni-tabbar"
@@ -20,9 +20,7 @@
             :class="{'uni-tabbar__icon__diff':!item.text}"
             class="uni-tabbar__icon"
           >
-            <img
-              :src="_getRealPath($route.meta.pagePath===item.pagePath?item.selectedIconPath:item.iconPath)"
-            >
+            <img :src="_getRealPath($route.meta.pagePath===item.pagePath?item.selectedIconPath:item.iconPath)">
             <div
               v-if="item.redDot"
               :class="{'uni-tabbar__badge':!!item.badge}"
@@ -53,42 +51,48 @@
 </template>
 
 <style>
-uni-tabbar {
+  uni-tabbar {
     display: block;
     box-sizing: border-box;
-  position: fixed;
-  left: 0;
-  bottom: 0;
     width: 100%;
     z-index: 998;
-}
+  }
 
-uni-tabbar .uni-tabbar {
+  uni-tabbar .uni-tabbar {
     display: flex;
+    z-index: 998;
+    box-sizing: border-box;
+  }
+
+  uni-tabbar.uni-tabbar-top,
+  uni-tabbar.uni-tabbar-bottom,
+  uni-tabbar.uni-tabbar-top .uni-tabbar,
+  uni-tabbar.uni-tabbar-bottom .uni-tabbar {
     position: fixed;
     left: var(--window-left);
     right: var(--window-right);
+  }
+
+  uni-tabbar.uni-tabbar-bottom .uni-tabbar {
     bottom: 0;
-  z-index: 998;
-  box-sizing: border-box;
     padding-bottom: 0;
     padding-bottom: constant(safe-area-inset-bottom);
     padding-bottom: env(safe-area-inset-bottom);
-}
+  }
 
-uni-tabbar .uni-tabbar ~ .uni-placeholder {
+  uni-tabbar .uni-tabbar~.uni-placeholder {
     width: 100%;
     height: 50px;
     margin-bottom: 0;
     margin-bottom: constant(safe-area-inset-bottom);
     margin-bottom: env(safe-area-inset-bottom);
-}
+  }
 
-uni-tabbar .uni-tabbar * {
+  uni-tabbar .uni-tabbar * {
     box-sizing: border-box;
-}
+  }
 
-uni-tabbar .uni-tabbar__item {
+  uni-tabbar .uni-tabbar__item {
     display: flex;
     justify-content: center;
     align-items: center;
@@ -97,9 +101,9 @@ uni-tabbar .uni-tabbar__item {
     font-size: 0;
     text-align: center;
     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-}
+  }
 
-uni-tabbar .uni-tabbar__bd {
+  uni-tabbar .uni-tabbar__bd {
     position: relative;
     height: 50px;
     display: flex;
@@ -107,44 +111,44 @@ uni-tabbar .uni-tabbar__bd {
     align-items: center;
     justify-content: center;
     cursor: pointer;
-}
+  }
 
-uni-tabbar .uni-tabbar__icon {
+  uni-tabbar .uni-tabbar__icon {
     position: relative;
     display: inline-block;
     margin-top: 5px;
     width: 24px;
     height: 24px;
-}
+  }
 
-uni-tabbar .uni-tabbar__icon.uni-tabbar__icon__diff {
+  uni-tabbar .uni-tabbar__icon.uni-tabbar__icon__diff {
     margin-top: 0px;
     width: 34px;
     height: 34px;
-}
+  }
 
-uni-tabbar .uni-tabbar__icon img {
+  uni-tabbar .uni-tabbar__icon img {
     width: 100%;
     height: 100%;
-}
+  }
 
-uni-tabbar .uni-tabbar__label {
+  uni-tabbar .uni-tabbar__label {
     position: relative;
     text-align: center;
     font-size: 10px;
     line-height: 1.8;
-}
+  }
 
-uni-tabbar .uni-tabbar-border {
+  uni-tabbar .uni-tabbar-border {
     position: absolute;
     left: 0;
     top: 0;
     width: 100%;
     height: 1px;
     transform: scaleY(0.5);
-}
+  }
 
-uni-tabbar .uni-tabbar__reddot {
+  uni-tabbar .uni-tabbar__reddot {
     position: absolute;
     top: 0;
     right: 0;
@@ -154,9 +158,9 @@ uni-tabbar .uni-tabbar__reddot {
     background-color: #f43530;
     color: #ffffff;
     transform: translate(40%, -20%);
-}
+  }
 
-uni-tabbar .uni-tabbar__badge {
+  uni-tabbar .uni-tabbar__badge {
     width: auto;
     height: 16px;
     line-height: 16px;
@@ -166,12 +170,11 @@ uni-tabbar .uni-tabbar__badge {
     font-size: 12px;
     text-align: center;
     white-space: nowrap;
-}
+  }
 </style>
 
 <script>
 import getRealPath from 'uni-platform/helpers/get-real-path'
-
 export default {
   name: 'TabBar',
   props: {

src/platforms/h5/components/index.js

@@ -4,6 +4,7 @@ import App from './app'
 import Page from './page'
 import AsyncError from './async-error'
 import AsyncLoading from './async-loading'
+import CustomTabBar from './app/customTabBar'
 
 import SystemRouteComponents from 'uni-h5-system-routes'
 
@@ -11,6 +12,7 @@ Vue.component(App.name, App)
 Vue.component(Page.name, Page)
 Vue.component(AsyncError.name, AsyncError)
 Vue.component(AsyncLoading.name, AsyncLoading)
+Vue.component(CustomTabBar.name, CustomTabBar)
 
 Object.keys(SystemRouteComponents).forEach(name => {
   const Component = SystemRouteComponents[name]

src/platforms/h5/service/api/ui/tab-bar.js

@@ -30,7 +30,7 @@ function setTabBar (type, args = {}) {
     const {
       index
     } = args
-    const tabBar = app.$children[0].tabBar
+    const tabBar = __uniConfig.tabBar
     if (index >= __uniConfig.tabBar.list.length) {
       return {
         errMsg: `${type}:fail tabbar item not found`