no message

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

@@ -170,6 +170,7 @@
         </div>
 
         <!--消息列表-->
+        <div ref="msgs" class="dialog-msgs">
             <VirtualList
                 ref="scroller"
                 class="dialog-scroller scrollbar-virtual"
@@ -206,6 +207,7 @@
                     <div v-else-if="allMsgs.length === 0" class="dialog-item nothing">{{$L('暂无消息')}}</div>
                 </template>
             </VirtualList>
+        </div>
 
         <!--底部输入-->
         <div ref="footer" class="dialog-footer" @click="onActive">
@@ -725,7 +727,6 @@ export default {
 
             scrollOffset: 0,
             scrollTail: 0,
-            scrollerHeight: 0,
 
             preventMoreLoad: false,
             preventToBottom: false,
@@ -1210,6 +1211,13 @@ export default {
                     return
                 }
                 this.$nextTick(_ => {
+                    if (this.$refs.msgs) {
+                        if (!this.observers.find(({key}) => key === 'scroller')) {
+                            const scrollerObserver = new ResizeObserver(this.onResizeEvent)
+                            scrollerObserver.observe(this.$refs.msgs);
+                            this.observers.push({key: 'scroller', observer: scrollerObserver})
+                        }
+                    }
                     if (this.$refs.footer) {
                         if (!this.observers.find(({key}) => key === 'footer')) {
                             const footerObserver = new ResizeObserver(this.onResizeEvent)
@@ -1217,13 +1225,6 @@ export default {
                             this.observers.push({key: 'footer', observer: footerObserver})
                         }
                     }
-                    if (this.$refs.scroller) {
-                        if (!this.observers.find(({key}) => key === 'scroller')) {
-                            const scrollerObserver = new ResizeObserver(this.onResizeEvent)
-                            scrollerObserver.observe(this.$refs.scroller.$el);
-                            this.observers.push({key: 'scroller', observer: scrollerObserver})
-                        }
-                    }
                 })
             },
             immediate: true
@@ -2056,38 +2057,40 @@ export default {
 
         onResizeEvent(entries) {
             entries.some(({target, contentRect}) => {
-                if (target === this.$refs.footer) {
+                if (target === this.$refs.msgs) {
+                    this.onMsgsResize(contentRect)
+                } else if (target === this.$refs.footer) {
                     this.onFooterResize()
-                } else if (target === this.$refs.scroller?.$el) {
-                    this.onScrollerResize(contentRect)
                 }
             })
         },
 
+        onMsgsResize({height}) {
+            this.$refs.scroller.$el.style.height = `${height}px`
+            //
+            if (typeof this.__msgs_height !== "undefined") {
+                const size = this.__msgs_height - height;
+                if (size !== 0) {
+                    const {offset, tail} = this.scrollInfo()
+                    if (tail > 0) {
+                        this.onToOffset(offset + size)
+                    }
+                }
+            }
+            this.__msgs_height = height;
+        },
+
         onFooterResize() {
             if (!this.$refs.footer) {
                 return
             }
             const footer = this.$refs.footer;
             const marginSize = parseInt($A.css(footer, 'marginTop')) + parseInt($A.css(footer, 'marginBottom'))
-            if (this.$refs.scroller) {
+            if (this.$refs.msgs) {
-                this.$refs.scroller.$el.style.marginBottom = `${footer.getBoundingClientRect().height + marginSize}px`;
+                this.$refs.msgs.style.marginBottom = `${footer.getBoundingClientRect().height + marginSize}px`;
             }
         },
 
-        onScrollerResize({height}) {
-            if (this.scrollerHeight > 0) {
-                const diff = this.scrollerHeight - height;
-                if (diff !== 0) {
-                    const {offset, tail} = this.scrollInfo()
-                    if (tail > 0) {
-                        this.onToOffset(offset + diff)
-                    }
-                }
-            }
-            this.scrollerHeight = height;
-        },
-
         onActive() {
             this.$emit("on-active");
         },

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

@@ -553,9 +553,17 @@
         }
     }
 
-    .dialog-scroller {
+    .dialog-msgs {
         flex: 1;
         position: relative;
+    }
+
+    .dialog-scroller {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
         padding: 16px 32px 0;
 
         &.scrollbar-virtual {