键盘高度

packages/components/HContent/index.vue

@@ -4,13 +4,15 @@
 */
 
 <template>
-  <div class="content">
+  <div
+    class="content" @touchstart.capture="touchStart" @touchend.capture="touchEnd">
     <slot/>
   </div>
 </template>
 
 <script>
 import { detectOS } from '../../common/utils/index'
+
 export default {
   name: 'HContent',
   props: {
@@ -22,16 +24,62 @@ export default {
   data () {
     return {
       fontSize: Number(window.document.documentElement.style.fontSize.replace('px', '')),
-      winHeight: window.innerHeight,
+      winHeight: Number(window.localStorage.getItem('height')) || window.innerHeight,
       winWidth: window.innerWidth,
+      height: 0,
+      startY: 0,
+      endY: 0,
     }
   },
   mounted () {
+    let vm = this
     if (this.calContent) {
       this.contentHeight()
     }
+
+    window.addEventListener('native.keyboardshow', function (e) {
+      setTimeout(function () {
+        if (detectOS() === 'android') {
+          vm.$el.style.transition = 'all .2s cubic-bezier(0.165, 0.84, 0.44, 1) 0s'
+          vm.$el.style.transform = 'translate(0px, -45px) scale(1) translateZ(0px)'
+        } else {
+          let keyBoardHeight = vm.getKeyBoardHeight()
+          let scollHeight = (innerHeight - vm.endY) < keyBoardHeight ? (keyBoardHeight - (innerHeight - vm.endY)) : 0
+          if (scollHeight) {
+            vm.$el.style.paddingBottom = (scollHeight + 20) + 'px'
+            vm.$el.style.transition = 'all .2s cubic-bezier(0.165, 0.84, 0.44, 1) 0s'
+            vm.$el.style.transform = 'translate(0px, -' + scollHeight + 'px) scale(1) translateZ(0px)'
+          }
+        }
+      }, 300)
+    })
+
+    window.addEventListener('native.keyboardhide', function (e) {
+      setTimeout(function () {
+        vm.$el.style.transition = 'all .2s cubic-bezier(0.165, 0.84, 0.44, 1) 0s'
+        vm.$el.style.transform = 'translate(0px, 0px) scale(1) translateZ(0px)'
+        vm.$el.style.paddingBottom = '0px'
+      }, 300)
+    })
   },
   methods: {
+    touchStart (event) {
+      if (detectOS() === 'ios') {
+        if (event.target.readOnly) return
+        if (event.target.nodeName === 'INPUT' || event.target.nodeName === 'TEXTAREA') {
+          this.startY = event.changedTouches[0].clientY
+        }
+      }
+    },
+    touchEnd (event) {
+      if (detectOS() === 'ios') {
+        if (event.target.readOnly) return
+        if (event.target.nodeName === 'INPUT' || event.target.nodeName === 'TEXTAREA') {
+          this.endY = event.changedTouches[0].clientY
+        }
+      }
+    },
+
     getHeaderHeight () {
       let vm = this
       let $el = vm.$el.previousElementSibling
@@ -55,7 +103,6 @@ export default {
           $el = $el.previousElementSibling
         }
       } while ($el)
-
       return headerHeight
     },
     getNextElementHeight () {
@@ -91,7 +138,19 @@ export default {
       const headerHeight = vm.getHeaderHeight()
       const nextHeight = vm.getNextElementHeight()
       let content = vm.$el
-      content.style.height = (window.innerHeight - nextHeight - headerHeight) + 'px'
+      vm.height = (vm.winHeight - nextHeight - headerHeight)
+      content.style.height = (vm.winHeight - nextHeight - headerHeight) + 'px'
+    },
+    getKeyBoardHeight () {
+      let innerWidth = window.innerWidth
+      if (detectOS() === 'ios') {
+        if (innerWidth >= 375 && innerHeight >= 812) {
+          return 460
+        }
+        return 400
+      } else {
+        return 275
+      }
     },
   },
 }