优化返回手势抖动问题

resources/assets/js/components/Mobile/Back.vue

@@ -1,5 +1,8 @@
 <template>
-    <div v-if="show" class="mobile-back" :style="style"></div>
+    <div class="mobile-back">
+        <div v-show="windowScrollY > 0" ref="bar" class="back-bar"></div>
+        <div v-if="show" class="back-semicircle" :style="style"></div>
+    </div>
 </template>
 
 <script>
@@ -27,12 +30,14 @@ export default {
     },
 
     mounted() {
+        this.$refs.bar.addEventListener('touchmove', this.barListener)
         document.addEventListener('touchstart', this.touchstart)
         document.addEventListener('touchmove', this.touchmove)
         document.addEventListener('touchend', this.touchend)
     },
 
     beforeDestroy() {
+        this.$refs.bar.removeEventListener('touchmove', this.barListener)
         document.removeEventListener('touchstart', this.touchstart)
         document.removeEventListener('touchmove', this.touchmove)
         document.removeEventListener('touchend', this.touchend)
@@ -67,6 +72,10 @@ export default {
             this.y = touch.clientY
         },
 
+        barListener(event) {
+            event.preventDefault()
+        },
+
         touchstart(event) {
             this.getXY(event)
             // 判断是否是边缘滑动

resources/assets/js/components/Mobile/Tabbar.vue

@@ -30,7 +30,6 @@
                 </template>
             </li>
         </ul>
-        <div class="mobile-back"></div>
     </div>
 </template>
 

resources/assets/js/pages/manage/components/DialogWrapper.vue

@@ -208,9 +208,6 @@
             :size="380">
             <DialogGroupInfo v-if="groupInfoShow" :dialogId="dialogId"/>
         </DrawerOverlay>
-
-        <!--滑动拦截-->
-        <div ref="back" v-show="isFocus" class="dialog-wrapper-back"></div>
     </div>
 </template>
 
@@ -255,7 +252,6 @@ export default {
             msgText: '',
             msgNew: 0,
             topId: 0,
-            isFocus: false,
 
             allMsgs: [],
             tempMsgs: [],
@@ -285,14 +281,6 @@ export default {
         }
     },
 
-    mounted() {
-        this.$refs.back.addEventListener('touchmove', this.backListener)
-    },
-
-    beforeDestroy() {
-        this.$refs.back.removeEventListener('touchmove', this.backListener)
-    },
-
     computed: {
         ...mapState([
             'userId',
@@ -648,12 +636,10 @@ export default {
         },
 
         onEventFocus() {
-            this.isFocus = true;
             this.$emit("on-focus")
         },
 
         onEventBlur() {
-            this.isFocus = false;
             this.$emit("on-blur")
         },
 
@@ -832,10 +818,6 @@ export default {
                     break;
             }
         },
-
-        backListener(e) {
-            e.preventDefault()
-        },
     }
 }
 </script>

resources/assets/sass/components/mobile.scss

@@ -129,19 +129,31 @@
 
 .mobile-back {
     display: none;
-    position: fixed;
-    top: 200px;
-    left: -50px;
-    width: 500px;
-    height: 500px;
-    background-color: rgba(0, 0, 0, 0.1);
-    z-index: 9999;
-    border-radius: 50%;
-    transform: translate(-460px, -50%);
-    transition: left 0.2s;
 
-    &.show-back {
+    .back-bar {
+        position: fixed;
+        top: 0;
         left: 0;
+        bottom: 0;
+        width: 20px;
+        z-index: 9998;
+    }
+
+    .back-semicircle {
+        position: fixed;
+        top: 200px;
+        left: -50px;
+        width: 500px;
+        height: 500px;
+        background-color: rgba(0, 0, 0, 0.1);
+        z-index: 9999;
+        border-radius: 50%;
+        transform: translate(-460px, -50%);
+        transition: left 0.2s;
+
+        &.show-back {
+            left: 0;
+        }
     }
 }
 

resources/assets/sass/pages/components/dialog-wrapper.scss

@@ -931,15 +931,6 @@
     }
 }
 
-.dialog-wrapper-back {
-    position: fixed;
-    top: 0;
-    left: 0;
-    bottom: 0;
-    width: 20px;
-    z-index: 9998;
-}
-
 @media (max-width: 768px) {
     .dialog-wrapper {
         .dialog-nav {