提交测试版

src/App.vue

@@ -1,32 +1,40 @@
 <template>
-    <div id="app" :style="{paddingBottom: paddingBottom + 'px'}">
-        <router-view />
-        <van-tabbar v-if="showTabbar" class="tabbar" ref="tabbar" route active-color="#CF9E3B" inactive-color="#999">
-            <van-tabbar-item replace v-for="(tab, index) in tabbar" :key="index" :to="tab.path">
-                <span>{{ tab.title }}</span>
-                <template #icon="props">
-                    <img :src="props.active ? tab.active: tab.inactive" alt="">
-                </template>
-            </van-tabbar-item>
-        </van-tabbar>
+    <div class="app-safe-area" :style="{minHeight: minHeight + 'px'}">
+        <div id="app" :data-height="minHeight - tabHeight" :style="{ minHeight: minHeight - tabHeight + 'px', paddingBottom: tabHeight + 'px'}">
+            <router-view />
+            <van-tabbar v-if="showTabbar" class="tabbar" ref="tabbar" route active-color="#CF9E3B" inactive-color="#999">
+                <van-tabbar-item replace name v-for="(tab, index) in tabbar" :key="index" :to="tab.path">
+                    <span>{{ tab.title }}</span>
+                    <template #icon="props">
+                        <img :src="props.active ? tab.active: tab.inactive" alt="">
+                    </template>
+                </van-tabbar-item>
+            </van-tabbar>
+        </div>
     </div>
 </template>
 
 <script>
 import { tabbar } from '../src/router';
-
+import safeAreaInsets from 'safe-area-insets';
+console.log('底部安全区：', window.screen.availHeight, safeAreaInsets.bottom)
 export default {
     name: 'App',
     data() {
         return {
             active: '3',
-            tabbar
+            minHeight: window.innerHeight - safeAreaInsets.bottom,
+            tabbar,
+            tabHeight: 0,
         };
     },
     provide() {
         return {
             root: this,
-            tabbar: this.$refs.tabbar
+            refs: this.$refs,
+            safeAreaInsetBottom: safeAreaInsets.bottom,
+            screenHeight: window.innerHeight - safeAreaInsets.bottom,
+            parentHeight: this.minHeight - this.tabHeight
         };
     },
     components: {},
@@ -37,8 +45,24 @@ export default {
                 this.active = tabbar.map(v => v.name).indexOf(val.name).toString();
             },
             deep: true,
+        },
+        showTabbar: {
+            handler() {
+                this.$nextTick(() => {
+                    const { tabbar } = this.$refs;
+                    console.log(tabbar)
+                    this.tabHeight = tabbar ? tabbar.$el.offsetHeight - safeAreaInsets.bottom: 0;
+                    console.log(this.tabHeight, )
+                })
+            },
+            immediate: true,
         }
     },
+
+    mounted(){
+        console.log('safe-area-inset-bottom', safeAreaInsets.bottom)
+
+    },
     computed: {
         showTabbar() {
             const path = tabbar.map(tab => tab.path);
@@ -51,22 +75,27 @@ export default {
 };
 </script>
 
-<style>
+<style lang="scss">
 @import '~@/assets/css/reset.css';
-@import '//at.alicdn.com/t/font_2897403_mztfr3fibh.css';
-
-#app {
-    font-family: Avenir, Helvetica, Arial, sans-serif;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-    max-width: 750px;
-    margin-left: auto;
-    margin-right: auto;
-}
-
-.tabbar {
-    /* padding-top: .57rem; */
-    /* background: url('~@/assets/img/bg.png') top center no-repeat; */
-    /* background-size: contain; */
+@import '//at.alicdn.com/t/font_2897403_lklpexeunn.css';
+.app-safe-area{
+    position: relative;
+    padding-bottom: env(safe-area-inset-bottom);
+    #app {
+        font-family: Avenir, Helvetica, Arial, sans-serif;
+        -webkit-font-smoothing: antialiased;
+        -moz-osx-font-smoothing: grayscale;
+        max-width: 750px;
+        margin-left: auto;
+        margin-right: auto;
+        min-height: 100%;
+    }
+    .tabbar {
+        /* padding-top: .57rem; */
+        /* background: url('~@/assets/img/bg.png') top center no-repeat; */
+        /* background-size: contain; */
+        position: fixed;
+        bottom: 0;
+    }
 }
 </style>