软件盘遮挡问题

config/index.js

@@ -23,7 +23,7 @@ module.exports = {
     proxyTable: {},
 
     // Various Dev Server settings
-    host: '192.168.137.1', // can be overwritten by process.env.HOST
+    host: 'localhost', // 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

@@ -5,8 +5,7 @@
 
 <template>
   <div
-    :class="cusClass" class="content" @touchstart="start"
-    @touchend="end">
+    :class="cusClass" class="content">
     <slot/>
   </div>
 </template>
@@ -27,11 +26,9 @@ 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', '')),
@@ -41,31 +38,32 @@ export default {
   },
   watch: {
     'showHeight': function () {
-      if (this.docmHeight >= this.showHeight) {
+      if (detectOS() !== 'ios') {
+        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'
+          let activeElement = document.activeElement
+          let offsetTop = activeElement.offsetTop
+          let offsetParent = activeElement.offsetParent
+          let viewTop = offsetParent.clientHeight
+          this.topHeight = this.$el.offsetTop
+          if (activeElement === document.body) {
+            return
+          }
+          while (offsetParent !== document.body) {
+            offsetTop += offsetParent.offsetTop
+            offsetParent = offsetParent.offsetParent
+          }
+          offsetTop = this.docmHeight - offsetTop - viewTop < 0 ? offsetTop - this.topHeight - viewTop : 0
+          if (offsetTop > 0) {
+            this.$el.style.transition = 'all .2s cubic-bezier(0.165, 0.84, 0.44, 1) 0s'
+            this.$el.style.transform = 'translate(0px, -' + offsetTop + 'px) scale(1) translateZ(0px)'
+            this.$el.style.height = parseInt(this.contentsHeight) + offsetTop + 'px'
+          }
+        } else {
+        // 软键盘收起的事件处理
+          this.$el.style.height = parseInt(this.contentsHeight) + 'px'
+          this.$el.style.transform = 'translate(0px,  0px) scale(1) translateZ(0px)'
         }
-      } 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)'
       }
     },
   },
@@ -73,16 +71,12 @@ export default {
     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不会冒泡，这样就可以使用事件代理，处理多个输入框存在的情况。
+    this.contentsHeight = this.$el.style.height.slice(0, this.$el.style.height.length - 2)
+    this.topHeight = this.$el.offsetTop + 40
+    if (detectOS() === 'ios') {
       document.body.addEventListener('focusin', () => {
-        let keyboardHeight = this.getKeyBoardHeight()
         // 软键盘弹出的事件处理
+        let keyboardHeight = this.getKeyBoardHeight()
         let activeElement = document.activeElement
         let offsetTop = activeElement.offsetTop
         let offsetParent = activeElement.offsetParent
@@ -93,21 +87,21 @@ export default {
           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'
+        offsetTop = (innerHeight - offsetTop) < keyboardHeight ? (keyboardHeight - (innerHeight - offsetTop)) : 0
+        if (offsetTop > 0) {
+          this.$el.style.transition = 'all .2s cubic-bezier(0.165, 0.84, 0.44, 1) 0s'
+          this.$el.style.transform = 'translate(0px, -' + offsetTop + 'px) scale(1) translateZ(0px)'
+          this.$el.style.height = parseInt(this.contentsHeight) + offsetTop + '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)'
+        this.$el.style.height = parseInt(this.contentsHeight) + 'px'
+        this.$el.style.transform = 'translate(0px,  0px) scale(1) translateZ(0px)'
       })
     }
+
+    // 当视图窗口大小发生改变时
     window.onresize = () => {
       return (() => {
         if (!this.isResize) {
@@ -175,30 +169,11 @@ export default {
       let content = vm.$el
       content.style.height = (window.innerHeight - nextHeight - headerHeight) + 'px'
     },
-    start (event) {
 
-    },
-    end (event) {
-    //   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 (detectOS() === 'ios') {
         if (innerWidth >= 375 && innerHeight >= 812) {
           return 460
         }

src/main.js

@@ -95,6 +95,7 @@ Vue.config.productionTip = false
 
 vum.$vumPlatform.ready(function () {
   if ((vum.Platform.isAndroid()) || (vum.Platform.isIOS())) {
+    cordova.plugins.Keyboard.disableScroll(true)
   }
 })