Update index.vue

packages/components/Scroll/index.vue

@@ -188,6 +188,9 @@ export default {
       bubbleY: 0, // 气泡y坐标,
       isIos: false,
       fullScreen: true,
+      fontSize: Number(window.document.documentElement.style.fontSize.replace('px', '')),
+      winHeight: window.innerHeight,
+      winWidth: window.innerWidth,
     }
   },
   computed: {
@@ -232,6 +235,60 @@ export default {
     })
   },
   methods: {
+    getHeaderHeight () {
+      let vm = this
+      let $el = vm.$el.previousElementSibling
+      let headerHeight = 0
+      do {
+        if ($el) {
+          let elHeight = window.getComputedStyle($el).height
+          let part = /^\d+(\.\d+)?px$/
+          if (elHeight && part.test(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 headerHeight
+    },
+    getNextElementHeight () {
+      let vm = this
+      let nextElement = this.$el.nextElementSibling
+      let nextHeight = 0
+      do {
+        if (nextElement) {
+          let elHeight = window.getComputedStyle(nextElement).height
+          let part = /^\d+(\.\d+)?px$/
+          if (elHeight && part.test(elHeight)) {
+            nextHeight += Number(elHeight.replace('px', ''))
+          }
+          if (nextElement._prevClass && nextElement._prevClass.indexOf('h-bottom-tab') === 0) {
+            let height = nextElement.clientHeight
+            if (detectOS() === 'ios' && height > Math.ceil(vm.fontSize * 0.88)) {
+              nextHeight += 0
+            } else {
+              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
+              }
+            }
+          }
+          nextElement = nextElement.nextElementSibling
+        }
+      } while (nextElement)
+      return nextHeight
+    },
     // 初始化scroll
     initScroll () {
       let vm = this
@@ -239,7 +296,10 @@ export default {
 
       // 设置scrollContent的最小高，实现高度不足时也有回弹效果
       if (this.$refs.scrollContent) {
+        const headerHeight = vm.getHeaderHeight()
+        // const nextHeight = vm.getNextElementHeight()
         this.$refs.scrollContent.style.minHeight = `${this.$refs.scroll.getBoundingClientRect().height + 1}px`
+        this.$refs.scrollContent.style.paddingTop = `${headerHeight}px`
         if (vm.hasFoot.footFlag) {
           let height = vm.hasFoot.height || 88
           // this.$refs.scrollContent.style.minHeight = `${this.$refs.scroll.getBoundingClientRect().height - height}px`
@@ -406,9 +466,10 @@ export default {
   //$ = vue-better-scroll
   .vue-better-scroll {
     width 100%
-    overflow hidden
+    overflow hidden !important
     box-sizing border-box
-    position relative
+    position absolute !important
+    top 0
     height 100%
 
     &__wrapper {
@@ -422,7 +483,7 @@ export default {
       text-size-adjust: none;
       -webkit-transform-origin: left top;
       transform-origin: left top;
-      padding-bottom: 0.9rem;
+      padding-bottom: 0.4rem;
     }
 
     &__pullup {
@@ -461,20 +522,24 @@ export default {
       }
     }
   }
-
+  .has-footer {
+    .vue-better-scroll__wrapper {
+      padding-bottom: 1rem;
+    }
+  }
    .platform-ios{
-     .vue-better-scroll {
-       &__wrapper {
-        //  padding-bottom: 2.16rem;
+     .has-footer {
+       .vue-better-scroll__wrapper {
+          padding-bottom: 1rem;
        }
      }
    }
   // iPhoneX适配
   @media (device-width: 375px) and (device-height: 812px) and (-webkit-min-device-pixel-ratio: 3) {
     .platform-ios {
-      .vue-better-scroll {
-        &__wrapper {
-        //  padding-bottom: 2.84rem;
+      .has-footer {
+        .vue-better-scroll__wrapper {
+          padding-bottom: 1.8rem;
         }
       }
     }
@@ -483,9 +548,9 @@ export default {
   // iPhoneX Max适配
   @media (device-width: 414px) and (device-height: 896px)  {
     .platform-ios {
-      .vue-better-scroll {
-        &__wrapper {
-         // padding-bottom: 2.84rem;
+      .has-footer {
+        .vue-better-scroll__wrapper {
+          padding-bottom: 1.8rem;
         }
       }
     }