提交测试版

src/pages/temple-list/index.vue

@@ -1,5 +1,5 @@
 <template>
-    <div>
+    <div class="temple-list" :style="{height: root.minHeight - root.tabHeight + 'px'}">
         <div class="topbar" ref="topbar">
             <van-nav-bar left-arrow :title="$route.meta.title" v-if="$route.meta.showNavBar" @click-left="$router.back()" :style="{backgroundColor: $route.meta.navBarBackgroundColor}" />
             <van-search v-model="keyword" show-action action-text="搜索" placeholder="请输入寺院、方丈、监院名称" @search="onSearch" @cancel="onCancel">
@@ -66,16 +66,17 @@ export default {
             map: null,
         }
     },
-    inject: ['root', 'tabbar'],
+    inject: ['root', 'parentHeight'],
     computed: {
         scroll(){
             return this.$refs.scroll
         }
     },
     mounted(){
+        console.log(this.parentHeight)
         this.$nextTick(() => {
-            const { offsetHeight } = this.root.$refs.tabbar.$el;
-            this.containerHeight = window.innerHeight - this.$refs.topbar.offsetHeight - offsetHeight - 20;
+            console.log(this.$refs.topbar.offsetHeight)
+            this.containerHeight = this.parentHeight - this.$refs.topbar.offsetHeight - 100;
         })
 
         if(this.query.search){
@@ -159,39 +160,42 @@ export default {
 </script>
 
 <style lang="scss">
-.operation-bar{
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 0 .4rem;
-    color: #333;
-    margin-bottom: .4rem;
-    margin-top: .3rem;
-    .position{
-        line-height: .37rem;
-        color: green;
-        span{
-            font-size: .37rem;
-            display: inline-block;
-            margin-right: .13rem;
+.temple-list{
+    .operation-bar{
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: 0 .4rem;
+        color: #333;
+        padding-bottom: .4rem;
+        padding-top: .3rem;
+        .position{
+            line-height: .37rem;
+            color: green;
+            span{
+                font-size: .37rem;
+                display: inline-block;
+                margin-right: .13rem;
+            }
+        }
+        .show-mode{
+            line-height: .37rem;
+            span{
+                font-size: .37rem;
+                display: inline-block;
+                margin-left: .13rem;
+            }
         }
     }
-    .show-mode{
-        line-height: .37rem;
-        span{
-            font-size: .37rem;
-            display: inline-block;
-            margin-left: .13rem;
-        }
-    }
-}
-.temple-list-container{
-    background: #f5f5f5;
-    overflow: hidden;
-    padding: .3rem;
-    .temple-map{
-        height: 100%;
+    .temple-list-container{
         background: #f5f5f5;
+        overflow: hidden;
+        padding: .3rem;
+        .temple-map{
+            height: 100%;
+            background: #f5f5f5;
+        }
     }
 }
-</style>
+
+</style>