Scroll

packages/components/STab/index.vue

@@ -34,6 +34,10 @@ export default {
       type: Boolean,
       default: false,
     },
+    showBottomBorder: {
+      type: Boolean,
+      default: false,
+    },
     overflowX: {
       type: Boolean,
       default: true,

packages/components/STab/tab-item.vue

@@ -2,7 +2,7 @@
   <section :class="[tabClass]" class="h-tab-item" @click="titleClick">
     <div class="h-item">
       <slot/>
-      <div class="bottom-border"/>
+      <div v-if="showBottomBorder" class="bottom-border"/>
     </div>
     <div v-show="showDivider" class="tab-divider"/>
   </section>
@@ -21,6 +21,9 @@ export default {
     showDivider () {
       return this.$parent.showDivider
     },
+    showBottomBorder () {
+      return this.$parent.showBottomBorder
+    },
     tabClass () {
       if (this.$parent.hasBorder) {
         return this.$parent.position === 'top' ? 'vue-1px-b' : 'vue-1px-t'

packages/components/Scroll/index.vue

@@ -188,6 +188,7 @@ export default {
       bubbleY: 0, // 气泡y坐标,
       isIos: false,
       fullScreen: true,
+      fontSize: Number(window.document.documentElement.style.fontSize.replace('px', '')),
     }
   },
   computed: {
@@ -232,6 +233,55 @@ 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) {
+            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,6 +289,8 @@ 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`
         if (vm.hasFoot.footFlag) {
           let height = vm.hasFoot.height || 88
@@ -406,7 +458,7 @@ export default {
   //$ = vue-better-scroll
   .vue-better-scroll {
     width 100%
-    overflow hidden
+    overflow hidden !important
     box-sizing border-box
     position relative
     height 100%

src/pages/hlsPopup.vue

@@ -23,7 +23,7 @@
       <tab-item>涉诉公告</tab-item>
       <tab-item>司法协助</tab-item>
     </s-tab>
-    <h-content class="has-footer">
+    <scroll class="has-footer">
       <h-button class="button-class" type="primary" @click.native="showLoading">showLoading</h-button>
       <h-button class="button-class" type="primary" @click.native="hideLoading">hideLoading</h-button>
       <h-button class="button-class" type="primary" @click.native="showLongTop">showLongTop</h-button>
@@ -239,7 +239,7 @@
       </div>
       <h2 class="item-title">Modal</h2>
       <h-button class="button-class" type="primary" @click.native="showModal">Modal</h-button>
-    </h-content>
+    </scroll>
 
     <bottom-tab :show-divider="true">
       <tab-button cusClass="button-exit" @click.native="showConfirm"><img

src/pages/home.vue

@@ -6,7 +6,7 @@
       </div>
       <div slot="center">小易</div>
     </h-header>
-    <s-tab>
+    <s-tab :has-border="true" :show-divider="true" :show-bottom-border="true">
       <tab-item>Vue</tab-item>
       <tab-item @click.native="showModal = !showModal">APP</tab-item>
     </s-tab>
@@ -76,7 +76,7 @@
     </s-tab> -->
     <!-- <div style="height: 40px;"/> -->
     <bottom-tab/>
-    <h-modal v-model="showModal" position="left">
+    <h-modal v-model="showModal" position="top">
       <div>123</div>
     </h-modal>
   </h-view>
@@ -199,7 +199,7 @@ export default {
      box-shadow: none;
     }
     .modal{
-      left:50%
+      top:50%
     }
     .content {
       background-color: #eeeeee;