配置文件

src/views/index/index.vue

@@ -4,7 +4,7 @@
 
     <router-view />
 
-    <van-tabbar route v-model="active" active-color="#F9BF3A">
+    <van-tabbar route v-model="active" id="van-tabbar" active-color="#F9BF3A">
       <van-tabbar-item v-for="tabBar in tabBarList" :key="tabBar.name" :replace="tabBar.replace" :to="tabBar.to">
 <!--        <van-text-ellipsis :content="$t(tabBar.text)" />-->
         <div style="white-space: nowrap;overflow: hidden;text-align: center">{{ $t(tabBar.text) }}</div>

src/views/index/message/index.vue

@@ -1,6 +1,6 @@
 <template>
 <!--  <j-nav-bar/>-->
-  <div ref="root" class="frame" style="height: calc(100vh - 50px)">
+  <div ref="root" class="frame" :style="{height: `calc(100vh - ${navBarHeight}px)`}">
     <iframe :src="iframeSrc" class="frame-iframe" ref="frameRef"></iframe>
   </div>
 </template>
@@ -11,8 +11,9 @@ import {getSetting} from "@/api";
 import {onMounted} from "vue";
 
 const iframeSrc = ref('')
+// const iframeSrc = ref('https://www.baidu.com')
 // const iframeSrc = ref('https://chatlink.mstatik.com/widget/standalone.html?eid=329d34187acc7ebda66a12a0671e3d70')
-
+const navBarHeight = ref(50)
 
 const _getSetting = () => {
   getSetting().then(res => {
@@ -22,6 +23,10 @@ const _getSetting = () => {
 }
 
 onMounted(() => {
+  const elementsByClassName = document.getElementById('van-tabbar');
+  if (elementsByClassName) {
+    navBarHeight.value = elementsByClassName.offsetHeight + 1
+  }
   _getSetting()
 })
 </script>