perf: 优化聊天窗口滚动

fr58386612 · Mar 31, 2022 · 3c8642f · 3c8642f
1 parent 3796a3d
commit 3c8642f
Show file tree

Hide file tree

Showing 2 changed files with 50 additions and 38 deletions.
diff --git a/resources/assets/js/pages/manage/components/DialogWrapper.vue b/resources/assets/js/pages/manage/components/DialogWrapper.vue
@@ -28,6 +28,7 @@
         <ScrollerY
             ref="scroller"
             class="dialog-scroller overlay-y"
+            :style="{opacity: visible ? 1 : 0}"
             :auto-bottom="isAutoBottom"
             @on-scroll="chatScroll"
             static>
@@ -129,6 +130,7 @@ export default {
 
     data() {
         return {
+            visible: true,
             autoBottom: true,
             autoInterval: null,
 
@@ -243,10 +245,13 @@ export default {
         dialogId: {
             handler(id) {
                 if (id) {
-                    this.autoBottom = true;
                     this.msgNew = 0;
                     this.topId = -1;
-                    this.$store.dispatch("getDialogMsgs", id);
+                    this.visible = false;
+                    this.$store.dispatch("getDialogMsgs", id).then(_ => {
+                        this.onToBottom();
+                        this.visible = true;
+                    });
                 }
             },
             immediate: true

diff --git a/resources/assets/js/store/actions.js b/resources/assets/js/store/actions.js
@@ -2025,45 +2025,52 @@ export default {
      * @param state
      * @param dispatch
      * @param dialog_id
+     * @returns {Promise<unknown>}
      */
     getDialogMsgs({state, dispatch}, dialog_id) {
-        if (!dialog_id) {
-            return;
-        }
-        let dialog = state.cacheDialogs.find(({id}) => id == dialog_id);
-        if (!dialog) {
-            dialog = {
-                id: dialog_id,
-            };
-            state.cacheDialogs.push(dialog);
-        }
-        if (dialog.loading) {
-            return;
-        }
-        dialog.loading = true;
-        dialog.currentPage = 1;
-        dialog.hasMorePages = false;
-        //
-        dispatch("call", {
-            url: 'dialog/msg/lists',
-            data: {
-                dialog_id: dialog_id,
-                page: dialog.currentPage
-            },
-        }).then(result => {
-            dialog.loading = false;
-            dialog.currentPage = result.data.current_page;
-            dialog.hasMorePages = !!result.data.next_page_url;
-            dispatch("saveDialog", dialog);
-            //
-            const ids = result.data.data.map(({id}) => id)
-            state.dialogMsgs = state.dialogMsgs.filter((item) => item.dialog_id != dialog_id || ids.includes(item.id));
+        return new Promise(resolve => {
+            if (!dialog_id) {
+                resolve()
+                return;
+            }
+            let dialog = state.cacheDialogs.find(({id}) => id == dialog_id);
+            if (!dialog) {
+                dialog = {
+                    id: dialog_id,
+                };
+                state.cacheDialogs.push(dialog);
+            }
+            if (dialog.loading) {
+                resolve()
+                return;
+            }
+            dialog.loading = true;
+            dialog.currentPage = 1;
+            dialog.hasMorePages = false;
             //
-            dispatch("saveDialog", result.data.dialog);
-            dispatch("saveDialogMsg", result.data.data);
-        }).catch(e => {
-            console.warn(e);
-            dialog.loading = false;
+            dispatch("call", {
+                url: 'dialog/msg/lists',
+                data: {
+                    dialog_id: dialog_id,
+                    page: dialog.currentPage
+                },
+            }).then(result => {
+                dialog.loading = false;
+                dialog.currentPage = result.data.current_page;
+                dialog.hasMorePages = !!result.data.next_page_url;
+                dispatch("saveDialog", dialog);
+                //
+                const ids = result.data.data.map(({id}) => id)
+                state.dialogMsgs = state.dialogMsgs.filter((item) => item.dialog_id != dialog_id || ids.includes(item.id));
+                //
+                dispatch("saveDialog", result.data.dialog);
+                dispatch("saveDialogMsg", result.data.data);
+                resolve()
+            }).catch(e => {
+                console.warn(e);
+                dialog.loading = false;
+                resolve()
+            });
         });
     },