ios 键盘

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,

config/uat.env.js

@@ -2,7 +2,7 @@
 module.exports = {
   NODE_ENV: '"production"',
   CONFIG_ENV: JSON.stringify(process.env.CONFIG_ENV),
-  debug: false,
+  debug: true,
   isMobilePlatform: true,
   appCode:'"HLS_APP"',
   clearTable: true,

packages/components/HContent/index.vue

@@ -4,7 +4,9 @@
 */
 
 <template>
-  <div class="content">
+  <div
+    class="content" @touchstart.capture="touchStart"
+    @touchend.capture="touchEnd">
     <slot/>
   </div>
 </template>
@@ -18,20 +20,25 @@ export default {
       type: Boolean,
       default: true,
     },
+    tapDelay: {
+      type: Number,
+      default: 200,
+    },
+    tapTimeout: {
+      type: Number,
+      default: 700,
+    },
   },
   data () {
     return {
-      docmHeight: 0, // 默认屏幕高度
-      showHeight: 0, // 实时屏幕高度
-      topHeight: 0, // content距离顶部的高度
-      contentsHeight: 0, // 内容区域本来高度
-      isResize: false, // 默认屏幕高度是否已获取
-      distance: 0,
-      final: 0,
       fontSize: Number(window.document.documentElement.style.fontSize.replace('px', '')),
       winHeight: window.innerHeight,
       winWidth: window.innerWidth,
-      contentScrollTop: 0,
+      height: 0,
+      firstClickTime: 0,
+      lastClickTime: 0,
+      startY: 0, // 触摸位置
+      endY: 0, // 结束位置
     }
   },
   watch: {
@@ -40,33 +47,59 @@ export default {
     if (this.calContent) {
       this.contentHeight()
     }
-    this.contentsHeight = this.$el.style.height.slice(0, this.$el.style.height.length - 2)
-    // if (detectOS() === 'ios') {
-    //   document.body.addEventListener('focusin', () => {
-    document.body.addEventListener('touchstart', (e) => {
+    /*  document.body.addEventListener('touchstart', (event) => {
+      if (event.target.readOnly) return
+      if (event.target.nodeName === 'INPUT' || event.target.nodeName === 'TEXTAREA') {
+        startTouches = event.changedTouches[0]
+      }
+      console.log('touchStartTime:' + event.timeStamp)
+      if ((event.timeStamp - lastClickTime) < tapDelay) {
+        event.preventDefault()
+      }
+    }) */
+    /*  document.body.addEventListener('touchend', (event) => {
+      if ((event.timeStamp - lastClickTime) < tapDelay) return
+      debugger
+      console.log('touchEndTime:' + event.timeStamp)
+      lastClickTime = event.timeStamp
       let keyboardHeight = this.getKeyBoardHeight()
-      if (e.target.localName === 'input' || e.target.localName === 'textarea') {
-        let pointY = e.touches[0].pageY
-        console.log(pointY)
-        this.distance = (innerHeight - pointY) < keyboardHeight ? (keyboardHeight - (innerHeight - pointY)) : 0
-        // if (this.distance) {
-        //   this.$el.style.transition = 'all .2s cubic-bezier(0.165, 0.84, 0.44, 1) 0s'
-        //   this.$el.style.transform = 'translate(0px, -' + this.distance + 'px) scale(1) translateZ(0px)'
-        //   // this.$el.style.paddingBottom = (distance + 20) + 'px'
-        //   this.$el.style.height = parseInt(this.contentsHeight) + this.distance + 'px'
+      if (event.target.nodeName === 'INPUT' || event.target.nodeName === 'TEXTAREA') {
+        let pointY = startTouches.clientY
+
+        let scrollTop = (this.winHeight - pointY) < keyboardHeight ? (keyboardHeight - (this.winHeight - pointY)) : 0
+        if (scrollTop) {
+          this.$el.style.transition = 'all .2s cubic-bezier(0.165, 0.84, 0.44, 1) 0s'
+          this.$el.style.transform = 'translate(0px, -' + scrollTop + 'px) scale(1) translateZ(0px)'
+          this.$el.style.paddingBottom = (scrollTop + 20) + 'px'
+          this.$el.style.height = parseInt(this.height) + scrollTop + 'px'
         }
-    //   }
-    // 软键盘弹出的事件处理
-    // })
-    })
-    document.body.addEventListener('focusin', () => {
+        event.target.focus()
+      }
+    }) */
+    /*  document.body.addEventListener('focusin', () => {
       // this.final = this.final + this.distance
-      console.log('final:' + this.final)
-      this.$el.style.transition = 'all .2s cubic-bezier(0.165, 0.84, 0.44, 1) 0s'
-      this.$el.style.transform = 'translate(0px, -' + this.distance + 'px) scale(1) translateZ(0px)'
+      console.log('distance:' + this.distance)
+     // this.$el.style.transition = 'all .2s cubic-bezier(0.165, 0.84, 0.44, 1) 0s'
       // this.$el.style.height = parseInt(this.contentsHeight) + this.distance + 'px'
+     // this.$el.style.transform = 'translate(0px, -' + this.distance + 'px) scale(1) translateZ(0px)'
+      let node = document.activeElement
+      setTimeout(() => {
+        if (node) {
+          if (node) {
+            if (node.nodeName === 'TEXTAREA' || node.nodeName === 'INPUT') { // 如果是input或textarea
+              if (node.style.textShadow === '') {
+                node.style.textShadow = 'rgba(0,0,0,0) 0 0 0' // 改变某个不可见样式，触发dom重绘
+                node.scrollIntoView()
+                node.focus()
+              } else {
+                node.style.textShadow = ''
+              }
+            }
+          }
+        }
+      }, 100)
     //   this.$el.scrollTop = this.final
-    })
+    }) */
     // document.body.addEventListener('focusout', () => {
     // if (detectOS() === 'ios') {
     //   document.body.addEventListener('focusin', () => {
@@ -142,6 +175,31 @@ export default {
     }
   },
   methods: {
+    touchStart (event) {
+      this.firstClickTime = event.timeStamp
+      if ((event.timeStamp - this.lastClickTime) < this.tapDelay) return
+      if (event.target.readOnly) return
+      if (event.target.nodeName === 'INPUT' || event.target.nodeName === 'TEXTAREA') {
+        this.startY = event.changedTouches[0].clientY
+      }
+    },
+    touchEnd (event) {
+      if ((event.timeStamp - this.lastClickTime) < this.tapDelay) return
+      this.lastClickTime = event.timeStamp
+      if (event.target.nodeName === 'INPUT' || event.target.nodeName === 'TEXTAREA') {
+        this.endY = event.changedTouches[0].clientY
+        if ((this.endY - this.startY > 100) || this.endY - this.startY < -100) return
+        let keyboardHeight = this.getKeyBoardHeight()
+        let scrollTop = (this.winHeight - this.endY) < keyboardHeight ? (keyboardHeight - (this.winHeight - this.endY)) : 0
+        if (scrollTop) {
+          this.$el.style.transition = 'all .2s cubic-bezier(0.165, 0.84, 0.44, 1) 0s'
+          this.$el.style.transform = 'translate(0px, -' + scrollTop + 'px) scale(1) translateZ(0px)'
+          this.$el.style.paddingBottom = (scrollTop + 20) + 'px'
+          this.$el.style.height = parseInt(this.height) + scrollTop + 'px'
+        }
+        event.target.focus()
+      }
+    },
     getHeaderHeight () {
       let vm = this
       let $el = vm.$el.previousElementSibling
@@ -194,6 +252,7 @@ export default {
       const headerHeight = vm.getHeaderHeight()
       const nextHeight = vm.getNextElementHeight()
       let content = vm.$el
+      vm.height = (window.innerHeight - nextHeight - headerHeight)
       content.style.height = (window.innerHeight - nextHeight - headerHeight) + 'px'
     },
 

src/pages/home.vue

@@ -10,10 +10,7 @@
       <tab-item>Vue</tab-item>
       <tab-item>APP</tab-item>
     </s-tab>
-<<<<<<< HEAD
     <div style="backgroundColor:red;height:50px"/>
-=======
->>>>>>> c9d4ed65258c2013b54bec8dadfe8daca1f98232
     <h-content >
       <list-item>
         <item>
@@ -100,22 +97,6 @@
           <section slot="name">tun</section>
           <input slot="content" type="text">
         </item>
-        <item>
-          <section slot="name">tun</section>
-          <input slot="content" type="text">
-        </item>
-        <item>
-          <section slot="name">tun</section>
-          <input slot="content" type="text">
-        </item>
-        <item>
-          <section slot="name">tun</section>
-          <input slot="content" type="text">
-        </item>
-        <item>
-          <section slot="name">tun</section>
-          <input slot="content" type="text">
-        </item>
       </list-item>
     </h-content>
     <!-- <s-tab>