软件盘遮挡问题

config/index.js

@@ -23,7 +23,7 @@ module.exports = {
     proxyTable: {},
 
     // Various Dev Server settings
-    host: 'localhost', // can be overwritten by process.env.HOST
+    host: '192.168.137.1', // can be overwritten by process.env.HOST
     port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
     autoOpenBrowser: false,
     errorOverlay: true,

packages/components/HContent/index.vue

@@ -27,15 +27,98 @@ export default {
   },
   data () {
     return {
+      content: 'content',
+      docmHeight: '0', // 默认屏幕高度
+      showHeight: '0', // 实时屏幕高度
+      topHeight: '0', // content距离顶部的高度
+      transHeight: '0', // content移动的距离
+      contentsHeight: '0', // 内容区域本来高度
+      isResize: false, // 默认屏幕高度是否已获取
       fontSize: Number(window.document.documentElement.style.fontSize.replace('px', '')),
       winHeight: window.innerHeight,
       winWidth: window.innerWidth,
     }
   },
+  watch: {
+    'showHeight': function () {
+      if (this.docmHeight >= this.showHeight) {
+        // 软键盘弹出的事件处理
+        let activeElement = document.activeElement
+        let offsetTop = activeElement.offsetTop
+        let offsetParent = activeElement.offsetParent
+        let viewTop = offsetParent.clientHeight
+        this.topHeight = document.getElementsByClassName(this.content)[0].offsetTop
+        if (activeElement === document.body) {
+          return
+        }
+        while (offsetParent !== document.body) {
+          offsetTop += offsetParent.offsetTop
+          offsetParent = offsetParent.offsetParent
+        }
+        let pointY = offsetTop 
+        offsetTop = this.docmHeight - pointY - viewTop < 0 ? offsetTop - this.topHeight - viewTop: 0
+        // alert(offsetTop)
+        if (offsetTop > 0) {
+          document.getElementsByClassName(this.content)[0].style.transition = 'all .2s cubic-bezier(0.165, 0.84, 0.44, 1) 0s'
+          document.getElementsByClassName(this.content)[0].style.transform = 'translate(0px, -' + offsetTop + 'px) scale(1) translateZ(0px)'
+          document.getElementsByClassName(this.content)[0].style.height = parseInt(this.contentsHeight) + offsetTop + 'px'
+        }
+      } else {
+        document.getElementsByClassName(this.content)[0].style.height = parseInt(this.contentsHeight) + 'px'
+        document.getElementsByClassName(this.content)[0].style.transform = 'translate(0px,  0px) scale(1) translateZ(0px)'
+      }
+    },
+  },
   mounted () {
     if (this.calContent) {
       this.contentHeight()
     }
+    console.log(document.getElementsByClassName(this.content)[0].offsetHeight)
+    this.contentsHeight = document.getElementsByClassName(this.content)[0].style.height.slice(0, document.getElementsByClassName(this.content)[0].style.height.length - 2)
+
+    this.topHeight = document.getElementsByClassName(this.content)[0].offsetTop + 40
+    console.log(this.topHeight)
+    if (this.detect() === 'ios') {
+      // focusin和focusout支持冒泡，对应focus和blur, 使用focusin和focusout的原因是focusin和focusout可以冒泡，focus和blur不会冒泡，这样就可以使用事件代理，处理多个输入框存在的情况。
+      document.body.addEventListener('focusin', () => {
+        let keyboardHeight = this.getKeyBoardHeight()
+        // 软键盘弹出的事件处理
+        let activeElement = document.activeElement
+        let offsetTop = activeElement.offsetTop
+        let offsetParent = activeElement.offsetParent
+        if (activeElement === document.body) {
+          return
+        }
+        while (offsetParent !== document.body) {
+          offsetTop += offsetParent.offsetTop
+          offsetParent = offsetParent.offsetParent
+        }
+        let pointY = offsetTop 
+        this.transHeight = (innerHeight - pointY) < keyboardHeight ? (keyboardHeight - (innerHeight - pointY)) : 0
+        console.log(this.transHeight)
+        if (this.transHeight > 0) {
+          document.getElementsByClassName(this.content)[0].style.transition = 'all .2s cubic-bezier(0.165, 0.84, 0.44, 1) 0s'
+          document.getElementsByClassName(this.content)[0].style.transform = 'translate(0px, -' + this.transHeight + 'px) scale(1) translateZ(0px)'
+          document.getElementsByClassName(this.content)[0].style.height = parseInt(this.contentsHeight) + this.transHeight + 'px'
+        }
+      })
+      document.body.addEventListener('focusout', () => {
+      // 软键盘收起的事件处理
+        document.getElementsByClassName(this.content)[0].style.height = parseInt(this.contentsHeight) + 'px'
+        document.getElementsByClassName(this.content)[0].style.transform = 'translate(0px,  0px) scale(1) translateZ(0px)'
+      })
+    }
+    window.onresize = () => {
+      return (() => {
+        if (!this.isResize) {
+          // 默认屏幕高度
+          this.docmHeight = document.documentElement.clientHeight
+          this.isResize = true
+        }
+        // 实时屏幕高度
+        this.showHeight = document.body.clientHeight
+      })()
+    }
   },
   methods: {
     getHeaderHeight () {
@@ -96,7 +179,33 @@ export default {
 
     },
     end (event) {
-      debugger
+    //   debugger
+    },
+    // 判断是android或者ios系统
+    detect () {
+      let equipmentType = ''
+      let agent = navigator.userAgent.toLowerCase()
+      let android = agent.indexOf('android')
+      let iphone = agent.indexOf('iphone')
+      let ipad = agent.indexOf('ipad')
+      if (android !== -1) {
+        equipmentType = 'android'
+      }
+      if (iphone !== -1 || ipad !== -1) {
+        equipmentType = 'ios'
+      }
+      return equipmentType
+    },
+    getKeyBoardHeight () {
+      var innerWidth = window.innerWidth
+      if (this.detect() === 'ios') {
+        if (innerWidth >= 375 && innerHeight >= 812) {
+          return 460
+        }
+        return 400
+      } else {
+        return 275
+      }
     },
   },
 }

src/pages/home.vue

@@ -14,7 +14,7 @@
       <tab-item>Vue</tab-item>
       <tab-item>APP</tab-item>
     </s-tab>
-    <h-content id="home-content">
+    <h-content >
       <list-item>
         <item>
           <section slot="name">姓名</section>
@@ -58,11 +58,11 @@
         </item>
       </list-item>
     </h-content>
-    <s-tab>
+    <!-- <s-tab>
       <tab-item>Vue</tab-item>
       <tab-item>APP</tab-item>
-    </s-tab>
-    <div style="height: 40px;"/>
+    </s-tab> -->
+    <!-- <div style="height: 40px;"/> -->
     <bottom-tab/>
   </h-view>
 </template>