keyboard

packages/components/Scroll/index.vue

@@ -10,8 +10,11 @@
     <div :class="c('__wrapper')">
       <div
         ref="scrollContent" class="scrollContent"
+        @contextmenu="preventDefault"
         @touchend="end"
+        @touchstart="start"
         @touchcancel="end"
+        @mousedown="start"
         @mouseup="end"
         @mouseleave="end">
         <slot/>
@@ -67,6 +70,9 @@ import { timeout } from './utils'
 import { detectOS } from '../../common/utils/index'
 let currenTranslateY = 0
 let scollHeight = 0
+let minHeight = 0
+let globleThis = null
+let paddingBottom = 0
 export default {
   name: 'Scroll',
   components: {
@@ -241,18 +247,24 @@ export default {
 
     window.addEventListener('native.keyboardhide', function (e) {
       console.log('native.keyboardhide')
-      /* if (currenTranslateY) {
-        this.$refs.scrollContent.style.paddingBottom = '0px'
-        this.scrollTo(0, -(currenTranslateY))
-      } */
+      if (currenTranslateY) {
+        console.dir(globleThis)
+        globleThis.$refs.scrollContent.style.paddingBottom = paddingBottom + 'px'
+        globleThis.$refs.scrollContent.style.minHeight = minHeight + 'px'
+        globleThis.scrollTo(0, -(currenTranslateY))
+      }
     })
     window.addEventListener('native.keyboardshow', function (e) {
       console.log('native.keyboardshow')
       console.log('scollHeight:' + scollHeight)
       console.log('currenTranslateY:' + currenTranslateY)
-      /* if (currenTranslateY && scollHeight) {
-        this.scrollTo(0, -(currenTranslateY + scollHeight))
-      } */
+      if (scollHeight) {
+        console.dir(globleThis)
+        paddingBottom = Number(globleThis.$refs.scrollContent.style.paddingBottom)
+        // vm.$refs.scrollContent.style.minHeight = `${minHeight + scollHeight + 100}px`
+        globleThis.$refs.scrollContent.style.paddingBottom = (paddingBottom + scollHeight + 100) + 'px'
+        globleThis.scrollTo(0, -(currenTranslateY + scollHeight))
+      }
     })
   },
   methods: {
@@ -264,6 +276,7 @@ export default {
       // 设置scrollContent的最小高，实现高度不足时也有回弹效果
       if (this.$refs.scrollContent) {
         this.$refs.scrollContent.style.minHeight = `${this.$refs.scroll.getBoundingClientRect().height + 1}px`
+        minHeight = Number(`${this.$refs.scroll.getBoundingClientRect().height + 1}`)
         if (vm.hasFoot.footFlag) {
           let height = vm.hasFoot.height || 88
           // this.$refs.scrollContent.style.minHeight = `${this.$refs.scroll.getBoundingClientRect().height - height}px`
@@ -434,22 +447,22 @@ export default {
         return 275
       }
     },
+    preventDefault (e) {
+      // 移动浏览器中长按元素会触发显示菜单，导致touchend事件不会触发，需要阻止该行为
+      e.preventDefault()
+    },
     start (e) {
-
     },
     end: function (e) {
+      let vm = globleThis = this
       if (e.target.readOnly) return
       if (e.target.nodeName === 'INPUT' || e.target.nodeName === 'TEXTAREA') {
-        const vueScrollElement = this.$refs.scroll.children[0]
+        const vueScrollElement = vm.$refs.scroll.children[0]
         currenTranslateY = Number(vueScrollElement.style.transform.match(/\d+(.\d+)?/g)[1])
         const pointY = e.changedTouches[0].clientY
         const innerHeight = window.innerHeight
         const keyBoardHeight = this.getKeyboardHeight()
         scollHeight = (innerHeight - pointY) < keyBoardHeight ? (keyBoardHeight - (innerHeight - pointY)) : 0
-        if (scollHeight) {
-          this.$refs.scrollContent.style.paddingBottom = (currenTranslateY + scollHeight) + 'px'
-          this.scrollTo(0, -(currenTranslateY + scollHeight))
-        }
       }
     },
 

src/pages/home.vue

@@ -44,8 +44,24 @@
           <input slot="content" type="text" placeholder="请输入">
         </item>
         <item>
-          <div slot="name">美队</div>
-          <input slot="content"  type="text" placeholder="请输入">
+          <div slot="name">蚁人</div>
+          <input slot="content" type="text" placeholder="请输入">
+        </item>
+        <item>
+          <div slot="name">黄蜂女</div>
+          <input slot="content" type="text" placeholder="请输入">
+        </item>
+        <item>
+          <div slot="name">雷神</div>
+          <input slot="content" type="text" placeholder="请输入">
+        </item>
+        <item>
+          <div slot="name">洛基</div>
+          <input slot="content" type="text" placeholder="请输入">
+        </item>
+        <item>
+          <div slot="name">绿巨人</div>
+          <input slot="content" type="text" placeholder="请输入">
         </item>
       </list-item>
     </scroll>