Selaa lähdekoodia

测试修复输入框ios闪烁问题

sa03 5 vuotta sitten
vanhempi
commit
af954619c3
1 muutettua tiedostoa jossa 21 lisäystä ja 4 poistoa
  1. 21 4
      _src/components/chatMini/chatMini.vue

+ 21 - 4
_src/components/chatMini/chatMini.vue

@@ -26,7 +26,11 @@
         <chat-pin v-bind="pinMsg" @pinMsgClose="pinMsgClose" @scrollToView="scrollToView"></chat-pin>
 
         <div class="box-bd" ref="msgBox">
-          <div ref="scrollWrap" @scroll.prevent="handleScroll" class="scroller">
+          <div ref="scrollWrap"
+            @scroll.prevent="handleScroll"
+            @touchstart.stop="fixIOS(false)"
+            class="scroller"
+          >
             <div ref="msgWrap" class="msg-wrap">
               <div class="msg-top-more" v-if="lockEnd">
                 <em>没有更多了</em>
@@ -235,7 +239,7 @@ export default {
       this.inputHeight = 'auto'
 
       // 处理ios系统下窗体闪烁的bug
-      this.$refs.scrollWrap.style.overflowY = 'hidden'
+      this.fixIOS()
 
       this.$nextTick(() => {
         this.inputHeight = Math.max(18, Math.min(ele.scrollHeight, 75)) + 'px'
@@ -696,9 +700,22 @@ export default {
       e.preventDefault()
       return false
     },
+    /**
+     * @des 处理ios系统下窗体闪烁的bug
+     * @param {boolean} flag {true: 激活修复状态, false: 恢复原始状态}
+     */
+    fixIOS (flag = true) {
+      if (flag) {
+        this.$refs.scrollWrap.style.overflowY = 'hidden'
+      } else {
+        this.$refs.scrollWrap.style.overflowY = 'scroll'
+      }
+    },
+    handleFocus () {
+      this.fixIOS()
+    },
     handleBlur () {
-      // 处理ios系统下窗体闪烁的bug
-      this.$refs.scrollWrap.style.overflowY = 'scroll'
+      this.fixIOS(false)
     },
     placeEnd (el) {
       var range = document.createRange()