content 定位调整

package.json

 {
   "name": "hls-easy-ui",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "description": "A Vue components project",
   "author": "JingChao <jingchao.wu@hand-china.com>",
   "private": false,

packages/common/styles/ionic-public-style.less

 .has-footer {
-  bottom: 0.88rem;
+  padding-bottom: 1.76rem;
   .scrollContent{
-    padding-bottom: 0.9rem;
+    padding-bottom: 1.76rem;
   }
 
 }

packages/common/styles/ionic.less

@@ -4089,242 +4089,21 @@ html {
   touch-action: pan-y;
 }
 
-body,
-.ionic-body {
-  -webkit-touch-callout: none;
-  -webkit-font-smoothing: antialiased;
-  font-smoothing: antialiased;
-  -webkit-text-size-adjust: none;
-  -moz-text-size-adjust: none;
-  text-size-adjust: none;
-  -webkit-tap-highlight-color: transparent;
-  -webkit-tap-highlight-color: transparent;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
+body{
+  height: 100%;
+  width: 100%;
   overflow: hidden;
-  margin: 0;
-  padding: 0;
-  color: #000;
-  word-wrap: break-word;
-  font-size: 0.28rem;
-  font-family: -apple-system;
-  font-family: "-apple-system", "Helvetica Neue", "Roboto", "Segoe UI", sans-serif;
-  //line-height: 40px;
-  text-rendering: optimizeLegibility;
-  -webkit-backface-visibility: hidden;
-  -webkit-user-drag: none;
-  -ms-content-zooming: none;
+  font-size: .32rem;
+  font-family: -apple-system-font,sans-serif;
+  -webkit-tap-highlight-color: transparent;
+  -webkit-font-smoothing: antialiased;
 }
 
 
-
-body.grade-b,
-body.grade-c {
-  text-rendering: auto;
-}
-
 .content {
   position: relative;
 }
 
-.scroll-content {
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  /*margin-top: -2px;
-  padding-top: 2px;
-  margin-bottom: -2px;*/
-  width: auto;
-  height: auto;
-  overflow: auto;
-  overflow-x: hidden;
-  -webkit-overflow-scrolling: touch;
-  overflow-scrolling: touch;
-}
-
-.menu .scroll-content.scroll-content-false {
-  z-index: 11;
-}
-
-.scroll-view {
-  position: relative;
-  display: block;
-  overflow: hidden;
-  margin-top: -1px;
-}
-
-.scroll-view.overflow-scroll {
-  position: relative;
-}
-
-.scroll-view.scroll-x {
-  overflow-x: scroll;
-  overflow-y: hidden;
-}
-
-.scroll-view.scroll-y {
-  overflow-x: hidden;
-  overflow-y: scroll;
-}
-
-.scroll-view.scroll-xy {
-  overflow-x: scroll;
-  overflow-y: scroll;
-}
-
-/**
- * Scroll is the scroll view component available for complex and custom
- * scroll view functionality.
- */
-.scroll {
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  -webkit-touch-callout: none;
-  -webkit-text-size-adjust: none;
-  -moz-text-size-adjust: none;
-  text-size-adjust: none;
-  -webkit-transform-origin: left top;
-  transform-origin: left top;
-}
-
-/**
- * Set ms-viewport to prevent MS "page squish" and allow fluid scrolling
- * https://msdn.microsoft.com/en-us/library/ie/hh869615(v=vs.85).aspx
- */
-@-ms-viewport {
-  width: device-width;
-}
-
-.scroll-bar {
-  position: absolute;
-  z-index: 9999;
-}
-
-.ng-animate .scroll-bar {
-  visibility: hidden;
-}
-
-.scroll-bar-h {
-  right: 0.04rem;
-  bottom: 0.06rem;
-  left: 0.04rem;
-  height: 0.06rem;
-}
-
-.scroll-bar-h .scroll-bar-indicator {
-  height: 100%;
-}
-
-.scroll-bar-v {
-  top: 0.04rem;
-  right: 0.06rem;
-  bottom: 0.04rem;
-  width: 0.06rem;
-}
-
-.scroll-bar-v .scroll-bar-indicator {
-  width: 100%;
-}
-
-.scroll-bar-indicator {
-  position: absolute;
-  border-radius: 0.12rem;
-  background: rgba(0, 0, 0, 0.3);
-  opacity: 1;
-  -webkit-transition: opacity 0.3s linear;
-  transition: opacity 0.3s linear;
-}
-
-.scroll-bar-indicator.scroll-bar-fade-out {
-  opacity: 0;
-}
-
-.platform-android .scroll-bar-indicator {
-  border-radius: 0;
-}
-
-.grade-b .scroll-bar-indicator,
-.grade-c .scroll-bar-indicator {
-  background: #aaa;
-}
-
-.grade-b .scroll-bar-indicator.scroll-bar-fade-out,
-.grade-c .scroll-bar-indicator.scroll-bar-fade-out {
-  -webkit-transition: none;
-  transition: none;
-}
-
-ion-infinite-scroll {
-  height: 1.2rem;
-  width: 100%;
-  display: block;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -moz-box;
-  display: -moz-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-direction: normal;
-  -webkit-box-orient: horizontal;
-  -webkit-flex-direction: row;
-  -moz-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  -webkit-justify-content: center;
-  -moz-justify-content: center;
-  justify-content: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  -webkit-align-items: center;
-  -moz-align-items: center;
-  align-items: center;
-}
-
-ion-infinite-scroll .icon {
-  color: #666666;
-  font-size: 0.6rem;
-  color: #666666;
-}
-
-ion-infinite-scroll:not(.active) .spinner,
-ion-infinite-scroll:not(.active) .icon:before {
-  display: none;
-}
-
-.overflow-scroll {
-  overflow-x: hidden;
-  overflow-y: scroll;
-  -webkit-overflow-scrolling: touch;
-  -ms-overflow-style: -ms-autohiding-scrollbar;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  position: absolute;
-}
-
-.overflow-scroll.pane {
-  overflow-x: hidden;
-  overflow-y: scroll;
-}
-
-.overflow-scroll .scroll {
-  position: static;
-  height: 100%;
-  -webkit-transform: translate3d(0, 0, 0);
-}
 
 /* If you change these, change platform.scss as well */
 .has-header {
@@ -4348,63 +4127,13 @@ ion-infinite-scroll:not(.active) .icon:before {
 }
 
 .has-footer {
-  bottom: 0.88rem;
+  padding-bottom: 0.88rem;
 }
 
 .has-subfooter {
   bottom: 1.56rem;
 }
 
-.has-tabs,
-.bar-footer.has-tabs {
-  bottom: 1rem;
-}
-
-.has-tabs.pane,
-.bar-footer.has-tabs.pane {
-  bottom: 1rem;
-  height: auto;
-}
-
-.bar-subfooter.has-tabs {
-  bottom: 1.86rem;
-}
-
-.has-footer.has-tabs {
-  bottom: 1.86rem;
-}
-
-.pane {
-  -webkit-transform: translate3d(0, 0, 0);
-  transform: translate3d(0, 0, 0);
-  -webkit-transition-duration: 0;
-  transition-duration: 0;
-  z-index: 1;
-}
-
-.view {
-  z-index: 1;
-}
-
-.pane,
-.view {
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background-color: #fff;
-  overflow: hidden;
-}
-
-.view-container {
-  position: absolute;
-  display: block;
-  width: 100%;
-  height: 100%;
-}
 
 /**
  * Typography

packages/common/styles/platform-ios.less

@@ -3,8 +3,15 @@
     top: auto;
     bottom: 0.24rem;
   }
+  .has-footer {
+    padding-bottom: 2.16rem;
+    .scrollContent{
+      padding-bottom: 2.16rem;
+    }
+
+  }
   .has-header {
-    top: 1.28rem;
+    padding-bottom: 1.28rem;
   }
   .header-top {
     margin-top: 1.26rem;

packages/common/styles/platform-iosx.less

@@ -7,8 +7,12 @@
     .has-tabs {
       bottom: 1.68rem;
     }
-    .has-footer{
-      margin-bottom: 0.68rem;
+    .has-footer {
+      padding-bottom: 2.84rem;
+      .scrollContent{
+        padding-bottom: 2.84rem;
+      }
+
     }
     .public-style {
       .bottom-tab{
@@ -29,8 +33,12 @@
     .has-tabs {
       bottom: 1.68rem;
     }
-    .has-footer{
-      margin-bottom: 0.68rem;
+    .has-footer {
+      padding-bottom: 2.84rem;
+      .scrollContent{
+        padding-bottom: 2.84rem;
+      }
+
     }
     .public-style {
       .bottom-tab{

packages/components/BottomTab/index.vue

@@ -32,6 +32,7 @@ export default {
     width: 100%;
     background-color: #fff;
     position: fixed;
+    z-index: 100;
     bottom: 0;
     display: flex;
     align-items: center;

packages/components/HContent/index.vue

@@ -4,7 +4,7 @@
 */
 
 <template>
-  <section :class="cusClass" class="content scroll-content">
+  <section :class="cusClass" class="content">
     <slot/>
   </section>
 </template>
@@ -22,8 +22,13 @@ export default {
 </script>
 
 <style lang="less">
-  .scroll-content {
-
+  .content {
+    flex: 1;
+    overflow: hidden;
+    background-color: #fafafa;
+    position: relative;
+    overflow-y: scroll;
+    height: 100%;
   }
 
   // iPhoneX适配

src/pages/hlsPopup.vue

@@ -23,8 +23,7 @@
       <tab-item>涉诉公告</tab-item>
       <tab-item>司法协助</tab-item>
     </s-tab>-->
-    <h-content
-      class="has-header has-footer">
+    <h-content 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>
@@ -221,14 +220,17 @@
 
       <h2 class="item-title">s-tab</h2>
       <div class="local-region">
-        <s-tab :show-divider="true" @tabClick="stabClick">
+        <s-tab :show-divider="true" @tabClick="stabClick" :overflowX="true">
           <tab-item>测试</tab-item>
           <tab-item>你好</tab-item>
           <tab-item>再见</tab-item>
           <tab-item>按钮</tab-item>
+          <tab-item>按钮2</tab-item>
+          <tab-item>按钮3</tab-item>
+          <tab-item>按钮4</tab-item>
         </s-tab>
 
-        <s-tab :default-active="2" position="bottom" cusClass="class" @tabClick="stabClick">
+        <s-tab :default-active="2" :show-divider="true" position="bottom" cusClass="class" @tabClick="stabClick" :overflowX="true">
           <tab-item><img src="../assets/image/warning@2x.png" style="width: 18px"></tab-item>
           <tab-item><img src="../assets/image/warning@2x.png" style="width: 18px"></tab-item>
           <tab-item><img src="../assets/image/warning@2x.png" style="width: 18px"></tab-item>

src/pages/home.vue

@@ -6,7 +6,7 @@
       </div>
       <div slot="center">小易</div>
     </h-header>
-    <h-content id="home-content" class="has-header has-footer">
+    <h-content id="home-content">
       <div v-for="item in message" class="message">
         <p v-show="false" class="message-time" v-text="item.time"/>
         <div v-show="!item.isFromeMe" class="message-wrap">
@@ -154,6 +154,7 @@ export default {
     .content {
       background-color: #eeeeee;
       //border: 1px solid red;
+      padding-bottom: 120px;
       .message {
         position: relative;
       }