解决content高度100%页面遮挡问题

packages/components/HContent/index.vue

@@ -10,6 +10,7 @@
 </template>
 
 <script>
+import { detectOS } from '../../common/utils/index'
 export default {
   name: 'HContent',
   props: {
@@ -18,6 +19,56 @@ export default {
       default: '',
     },
   },
+  mounted () {
+    this.contentHeight()
+  },
+  methods: {
+    getHeader () {
+      let $el = this.$el.previousElementSibling
+      do {
+        if ($el) {
+          if ($el._prevClass.indexOf('h-header') !== -1) {
+            break
+          }
+          $el = $el.previousElementSibling
+        }
+      } while ($el)
+
+      return $el
+    },
+    getNextElementHeight () {
+      let nextElement = this.$el.nextElementSibling
+      let height = 0
+      if (nextElement) {
+        height = window.getComputedStyle(nextElement).height
+        if (height) {
+          height = Number(height.replace('px', ''))
+        }
+      }
+      return height
+    },
+    contentHeight () {
+      const headerEl = this.getHeader()
+      const nextHeight = this.getNextElementHeight()
+      const winHeight = window.innerHeight
+      const winWidth = window.innerWidth
+      let paddingHeight = 0
+      if (headerEl) {
+        if (detectOS() === 'ios' && winWidth === 375 && winHeight === 812) {
+          paddingHeight = 40
+        } else if (detectOS() === 'ios' && winWidth === 414 && winHeight === 896) {
+          paddingHeight = 40
+        } else if (detectOS() === 'ios') {
+          paddingHeight = 20
+        } else {
+          paddingHeight = 0
+        }
+      }
+      let content = this.$el
+      let offsetTop = content.offsetTop
+      content.style.height = (window.innerHeight - offsetTop - paddingHeight - nextHeight) + 'px'
+    },
+  },
 }
 </script>
 

src/pages/hlsPopup.vue

@@ -9,7 +9,7 @@
         操作
       </div>
     </h-header>
-    <s-tab :overflowX="true" :showDivider="true" :defaultActive="6" has-border="true">
+    <s-tab :overflowX="true" :showDivider="true" :defaultActive="6" :has-border="true">
       <tab-item>工商资料</tab-item>
       <tab-item>股东成员</tab-item>
       <tab-item>对外投资</tab-item>

src/pages/home.vue

@@ -6,6 +6,7 @@
       </div>
       <div slot="center">小易</div>
     </h-header>
+
     <h-content id="home-content">
       <div v-for="item in message" class="message">
         <p v-show="false" class="message-time" v-text="item.time"/>

src/router/index.js

@@ -14,7 +14,7 @@ export default new Router({
       path: '/',
       redirect: '/home',
     },
-    {path: '/home', component: Home, name: 'Home', meta: {keepAlive: true}},
+    {path: '/home', component: Home, name: 'Home', meta: {keepAlive: false}},
     // test工具类
     {path: '/hls-popup', component: HlsPopup, name: 'HlsPopup', meta: {keepAlive: false}},
   ],