content高度

package.json

@@ -84,7 +84,7 @@
     "vue-slim-better-scroll": "^1.4.1",
     "vue-style-loader": "^3.0.1",
     "vue-template-compiler": "^2.5.2",
-    "vux-loader": "^1.0.56",
+    "vux-loader": "latest",
     "webpack": "^3.6.0",
     "webpack-bundle-analyzer": "^2.9.0",
     "webpack-dev-middleware": "^1.10.0",

packages/components/HContent/index.vue

@@ -36,53 +36,58 @@ export default {
     }
   },
   methods: {
-    getHeader () {
-      let $el = this.$el.previousElementSibling
+    getHeaderHeight () {
+      let vm = this
+      let $el = vm.$el.previousElementSibling
+      let headerHeight = 0
       do {
         if ($el) {
-          if ($el._prevClass.indexOf('h-header') !== -1) {
-            break
+          let elHeight = window.getComputedStyle($el).height
+          if (elHeight) {
+            headerHeight += Number(elHeight.replace('px', ''))
+          }
+          if ($el._prevClass && $el._prevClass.indexOf('h-header') === 0) {
+            if (detectOS() === 'ios' && vm.winWidth === 375 && vm.winHeight === 812) {
+              headerHeight += 0.8 * vm.fontSize
+            } else if (detectOS() === 'ios' && vm.winWidth === 414 && vm.winHeight === 896) {
+              headerHeight += 0.8 * vm.fontSize
+            } else if (detectOS() === 'ios') {
+              headerHeight += 0.4 * vm.fontSize
+            }
           }
           $el = $el.previousElementSibling
         }
       } while ($el)
 
-      return $el
+      return headerHeight
     },
     getNextElementHeight () {
       let vm = this
       let nextElement = this.$el.nextElementSibling
       let nextHeight = 0
-      let paddingHeight = 0
-      if (nextElement) {
-        nextHeight = window.getComputedStyle(nextElement).height
-        if (nextHeight) {
-          nextHeight = Number(nextHeight.replace('px', ''))
-        }
-        if (detectOS() === 'ios' && vm.winWidth === 375 && vm.winHeight === 812) {
-          paddingHeight = vm.fontSize * 0.68
-        } else if (detectOS() === 'ios' && vm.winWidth === 414 && vm.winHeight === 896) {
-          paddingHeight = vm.fontSize * 0.68
+      do {
+        if (nextElement) {
+          let elHeight = window.getComputedStyle(nextElement).height
+          if (elHeight) {
+            nextHeight += Number(elHeight.replace('px', ''))
+          }
+          if (nextElement._prevClass && nextElement._prevClass.indexOf('h-bottom-tab') === 0) {
+            if (detectOS() === 'ios' && vm.winWidth === 375 && vm.winHeight === 812) {
+              nextHeight += vm.fontSize * 0.68
+            } else if (detectOS() === 'ios' && vm.winWidth === 414 && vm.winHeight === 896) {
+              nextHeight += vm.fontSize * 0.68
+            }
+          }
         }
-      }
-      return nextHeight + paddingHeight
+        nextElement = nextElement.nextElementSibling
+      } while (nextElement)
+      return nextHeight
     },
     contentHeight () {
       let vm = this
-      const headerEl = this.$el.previousElementSibling
-      const nextHeight = this.getNextElementHeight()
-      let headerHeight = 0
-      if (headerEl) {
-        headerHeight = vm.fontSize * 0.88
-        if (detectOS() === 'ios' && vm.winWidth === 375 && vm.winHeight === 812) {
-          headerHeight = headerHeight + 0.8 * vm.fontSize
-        } else if (detectOS() === 'ios' && vm.winWidth === 414 && vm.winHeight === 896) {
-          headerHeight = headerHeight + 0.8 * vm.fontSize
-        } else if (detectOS() === 'ios') {
-          headerHeight = headerHeight + 0.4 * vm.fontSize
-        }
-      }
-      let content = this.$el
+      const headerHeight = vm.getHeaderHeight()
+      const nextHeight = vm.getNextElementHeight()
+      let content = vm.$el
       content.style.height = (window.innerHeight - nextHeight - headerHeight) + 'px'
     },
   },

src/pages/home.vue

@@ -6,6 +6,11 @@
       </div>
       <div slot="center">小易</div>
     </h-header>
+    <s-tab>
+      <tab-item>Vue</tab-item>
+      <tab-item>APP</tab-item>
+    </s-tab>
+    <div style="height: 60px"/>
     <h-content id="home-content">
       <div v-for="item in message" class="message">
         <p v-show="false" class="message-time" v-text="item.time"/>
@@ -22,9 +27,12 @@
         </div>
       </div>
     </h-content>
-    <bottom-tab>
-
-    </bottom-tab>
+    <s-tab>
+      <tab-item>Vue</tab-item>
+      <tab-item>APP</tab-item>
+    </s-tab>
+    <div style="height: 40px;"/>
+    <bottom-tab/>
   </h-view>
 </template>
 
@@ -49,7 +57,7 @@ export default {
 
   },
   mounted () {
-    this.height = this.$refs.textarea.clientHeight
+    // this.height = this.$refs.textarea.clientHeight
   },
   methods: {
     scrollBottom () {

yarn.lock

@@ -8513,7 +8513,7 @@ vux-blazy@^1.6.4:
   resolved "https://registry.yarnpkg.com/vux-blazy/-/vux-blazy-1.6.4.tgz#e33073d902e0a3844ef1a463cce3ca2e0aab47bf"
   integrity sha1-4zBz2QLgo4RO8aRjzOPKLgqrR78=
 
-vux-loader@^1.0.56:
+vux-loader@latest:
   version "1.2.9"
   resolved "https://registry.yarnpkg.com/vux-loader/-/vux-loader-1.2.9.tgz#51de423753332ce102eae1551a28b2b1155142b3"
   integrity sha512-AjaD08eyeflQgGwAVJjcwA245h2hTJgXR5pRfLajgmIeEXpbzXs41FnuKLig5U2EQpYyMJ7/f/2Rdlr7cYrIOA==