feat(h5): add matchMedia for tabBar

packages/webpack-uni-pages-loader/lib/util.js

@@ -41,11 +41,14 @@ function hasOwn (obj, key) {
   return _hasOwnProperty.call(obj, key)
 }
 
-function trimMPJson (json) {
+function trimMPJson (json) {
   delete json.maxWidth
   delete json.topWindow
   delete json.leftWindow
   delete json.rightWindow
+  if (json.tabBar) {
+    delete json.tabBar.matchMedia
+  }
   return json
 }
 

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

 <template>
-  <uni-tabbar
-    v-if="hasTabBar"
-    v-show="showTabBar"
+  <uni-tabbar
+    v-if="hasTabBar"
+    v-show="showTabBar"
   >
-    <div
+    <div
       :style="{'flex-direction':direction==='vertical'?'column':'row',backgroundColor:tabBarOptions.backgroundColor}"
-      class="uni-tabbar"
+      class="uni-tabbar"
     >
-      <div
-        v-for="(item,index) in tabBarOptions.list"
-        :key="item.pagePath"
-        class="uni-tabbar__item"
-        @click="_switchTab(item,index)"
+      <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"
+          <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"
+            <div
+              v-if="item.redDot"
+              :class="{'uni-tabbar__badge':!!item.badge}"
+              class="uni-tabbar__reddot"
             >
               {{ item.badge }}
             </div>
           </div>
-          <div
-            v-if="item.text"
+          <div
+            v-if="item.text"
             :style="{color:selectedIndex===index?tabBarOptions.selectedColor:tabBarOptions.color,fontSize:showIcon&&item.iconPath?'10px':'14px'}"
-            class="uni-tabbar__label"
+            class="uni-tabbar__label"
           >
             {{ item.text }}
-            <div
-              v-if="item.redDot&&(!showIcon || !item.iconPath)"
-              :class="{'uni-tabbar__badge':!!item.badge}"
-              class="uni-tabbar__reddot"
+            <div
+              v-if="item.redDot&&(!showIcon || !item.iconPath)"
+              :class="{'uni-tabbar__badge':!!item.badge}"
+              class="uni-tabbar__reddot"
             >
               {{ item.badge }}
             </div>
@@ -92,6 +92,11 @@ export default {
   watch: {
     selected (val) {
       this.selectedIndex = val
+      // 同步至内置tabBar
+      const tabBar = getApp().$children[0].$refs.tabBar
+      if (tabBar) {
+        tabBar.selectedIndex = val
+      }
     },
     '$route' (to, from) {
       if (to.meta.isTabBar) {
@@ -135,4 +140,4 @@ export default {
 </script>
 
 <style>
-</style>
+</style>

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

@@ -5,10 +5,12 @@
       :router-key="key"
       :keep-alive-include="keepAliveInclude"
       @maxWidth="onMaxWidth"
+      @layout="onLayout"
     />
     <tab-bar
       v-if="hasTabBar"
       v-show="showTabBar"
+      ref="tabBar"
       v-bind="tabBarOptions"
     />
     <toast
@@ -36,6 +38,7 @@
 </template>
 <script>
 import {
+  hasOwn,
   isPlainObject
 } from 'uni-shared'
 
@@ -68,7 +71,9 @@ export default {
       transitionName: 'fade',
       hideTabBar: false,
       sysComponents: this.$sysComponents,
-      showMaxWidth: false
+      showLayout: false,
+      showMaxWidth: false,
+      tabBarMediaQuery: false
     }
   },
   computed: {
@@ -82,7 +87,11 @@ export default {
       return tabBar.list && tabBar.list.length
     },
     showTabBar () {
-      return this.$route.meta.isTabBar && !this.hideTabBar
+      return !this.hideTabBar &&
+          (
+            this.$route.meta.isTabBar ||
+            (this.showLayout && this.tabBarMediaQuery) // 宽屏且符合tabBar的media
+          )
     }
   },
   watch: {
@@ -107,6 +116,7 @@ export default {
     if (uni.canIUse('css.var')) {
       document.documentElement.style.setProperty('--status-bar-height', '0px')
     }
+    this.initMediaQuery()
   },
   mounted () {
     window.addEventListener('message', function (evt) {
@@ -123,8 +133,24 @@ export default {
     })
   },
   methods: {
+    onLayout (showLayout) {
+      this.showLayout = showLayout
+    },
     onMaxWidth (showMaxWidth) {
       this.showMaxWidth = showMaxWidth
+    },
+    initMediaQuery () {
+      if (
+        window.matchMedia &&
+          tabBar.matchMedia &&
+          hasOwn(tabBar.matchMedia, 'minWidth')
+      ) {
+        const mediaQueryList = window.matchMedia('(min-width: ' + tabBar.matchMedia.minWidth + 'px)')
+        mediaQueryList.addListener((e) => {
+          this.tabBarMediaQuery = e.matches
+        })
+        this.tabBarMediaQuery = mediaQueryList.matches
+      }
     }
   }
 }

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

@@ -180,6 +180,9 @@ export default {
     $route () {
       this.checkMaxWidth()
     },
+    showLayout () {
+      this.checkLayout()
+    },
     showTopWindow (newVal, val) {
       if (newVal) {
         this.$nextTick(this.onTopWindowInit)
@@ -242,6 +245,7 @@ export default {
     this.initMaxWidth()
   },
   mounted () {
+    this.checkLayout()
     this.checkMaxWidth()
   },
   methods: {
@@ -275,7 +279,10 @@ export default {
         this.checkMaxWidth()
       })
     },
-    checkMaxWidth () {
+    checkLayout () {
+      this.$emit('layout', this.showLayout)
+    },
+    checkMaxWidth () {
       const windowWidth = document.body.clientWidth
       const maxWidth = parseInt(this.$route.meta.maxWidth)
       let showMaxWidth = false
@@ -423,10 +430,6 @@ export default {
     position: fixed;
   }
 
-  .uni-app--showlayout+uni-tabbar {
-    display: none;
-  }
-
   .uni-top-window {
     position: fixed;
     left: var(--window-margin);

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

 <template>
   <uni-tabbar :class="['uni-tabbar-'+position]">
-    <div
-      :style="{backgroundColor:backgroundColor}"
-      class="uni-tabbar"
+    <div
+      :style="{backgroundColor:backgroundColor}"
+      class="uni-tabbar"
     >
-      <div
-        :style="{backgroundColor:borderColor}"
-        class="uni-tabbar-border"
+      <div
+        :style="{backgroundColor:borderColor}"
+        class="uni-tabbar-border"
       />
-      <div
-        v-for="(item,index) in list"
-        :key="item.pagePath"
-        class="uni-tabbar__item"
-        @click="_switchTab(item,index)"
+      <div
+        v-for="(item,index) in list"
+        :key="item.pagePath"
+        class="uni-tabbar__item"
+        @click="_switchTab(item,index)"
       >
         <div class="uni-tabbar__bd">
-          <div
-            v-if="item.iconPath"
-            :class="{'uni-tabbar__icon__diff':!item.text}"
-            class="uni-tabbar__icon"
+          <div
+            v-if="item.iconPath"
+            :class="{'uni-tabbar__icon__diff':!item.text}"
+            class="uni-tabbar__icon"
           >
-            <img :src="_getRealPath($route.meta.pagePath===item.pagePath?item.selectedIconPath:item.iconPath)">
-            <div
-              v-if="item.redDot"
-              :class="{'uni-tabbar__badge':!!item.badge}"
-              class="uni-tabbar__reddot"
+            <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:$route.meta.pagePath===item.pagePath?selectedColor:color,fontSize:item.iconPath?'10px':'14px'}"
-            class="uni-tabbar__label"
+          <div
+            v-if="item.text"
+            :style="{color:selectedIndex===index?selectedColor:color,fontSize:item.iconPath?'10px':'14px'}"
+            class="uni-tabbar__label"
           >
             {{ item.text }}
-            <div
-              v-if="item.redDot&&!item.iconPath"
-              :class="{'uni-tabbar__badge':!!item.badge}"
-              class="uni-tabbar__reddot"
+            <div
+              v-if="item.redDot&&!item.iconPath"
+              :class="{'uni-tabbar__badge':!!item.badge}"
+              class="uni-tabbar__reddot"
             >
               {{ item.badge }}
             </div>
@@ -73,6 +73,14 @@
     right: var(--window-right);
   }
 
+  .uni-app--showlayout+uni-tabbar.uni-tabbar-top,
+  .uni-app--showlayout+uni-tabbar.uni-tabbar-bottom,
+  .uni-app--showlayout+uni-tabbar.uni-tabbar-top .uni-tabbar,
+  .uni-app--showlayout+uni-tabbar.uni-tabbar-bottom .uni-tabbar {
+    left: var(--window-margin);
+    right: var(--window-margin);
+  }
+
   uni-tabbar.uni-tabbar-bottom .uni-tabbar {
     bottom: 0;
     padding-bottom: 0;
@@ -207,6 +215,17 @@ export default {
       default: function () {
         return []
       }
+    },
+    matchMedia: {
+      type: Object,
+      default: function () {
+        return {}
+      }
+    }
+  },
+  data () {
+    return {
+      selectedIndex: 0
     }
   },
   computed: {
@@ -217,9 +236,16 @@ export default {
     }
   },
   watch: {
-    '$route' (to, from) {
-      if (to.meta.isTabBar) {
-        this.__path__ = to.path
+    $route: {
+      immediate: true,
+      handler (to) {
+        if (to.meta.isTabBar) {
+          this.__path__ = to.path
+          const index = this.list.findIndex(item => to.meta.pagePath === item.pagePath)
+          if (index > -1) {
+            this.selectedIndex = index
+          }
+        }
       }
     }
   },
@@ -239,6 +265,7 @@ export default {
       text,
       pagePath
     }, index) {
+      this.selectedIndex = index
       let url = '/' + pagePath
       if (url === __uniRoutes[0].alias) {
         url = '/'
@@ -261,4 +288,4 @@ export default {
     }
   }
 }
-</script>
+</script>

yarn.lock

@@ -7680,16 +7680,11 @@ p-try@^2.0.0:
   resolved "https://registry.npmjs.org/p-try/-/p-try-2.2.0.tgz#cb2868540e313d61de58fafbe35ce9004d5540e6"
   integrity sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==
 
-pako@^1.0.11:
+pako@^1.0.11, pako@~1.0.5:
   version "1.0.11"
   resolved "https://registry.yarnpkg.com/pako/-/pako-1.0.11.tgz#6c9599d340d54dfd3946380252a35705a6b992bf"
   integrity sha512-4hLB8Py4zZce5s4yd9XzopqwVv/yGNhV1Bl8NTmCq1763HeK2+EwVTv+leGeL13Dnh2wfbqowVPXCIO0z4taYw==
 
-pako@~1.0.5:
-  version "1.0.11"
-  resolved "https://registry.npmjs.org/pako/-/pako-1.0.11.tgz#6c9599d340d54dfd3946380252a35705a6b992bf"
-  integrity sha512-4hLB8Py4zZce5s4yd9XzopqwVv/yGNhV1Bl8NTmCq1763HeK2+EwVTv+leGeL13Dnh2wfbqowVPXCIO0z4taYw==
-
 parallel-transform@^1.1.0:
   version "1.2.0"
   resolved "https://registry.npmjs.org/parallel-transform/-/parallel-transform-1.2.0.tgz#9049ca37d6cb2182c3b1d2c720be94d14a5814fc"