perf: 优化新消息等列表滚动

resources/assets/js/components/ScrollerY.vue

@@ -123,15 +123,11 @@ export default {
         },
 
         autoToBottom() {
-            if (this.autoBottom && this.$refs.bottom) {
+            if (this.autoBottom) {
-                try {
+                $A.scrollToView(this.$refs.bottom, {
-                    this.$refs.bottom.scrollIntoView(false);
+                    behavior: 'instant',
-                } catch (e) {
+                    inline: 'end',
-                    scrollIntoView(this.$refs.bottom, {
+                })
-                        behavior: 'instant',
-                        inline: 'end',
-                    })
-                }
             }
         },
 

resources/assets/js/functions/common.js

@@ -967,6 +967,28 @@
             let domain = (weburl + "").match(urlReg);
             return ((domain != null && domain.length > 0) ? domain[2] : "");
         },
+
+        /**
+         * 滚动到View
+         * @param element
+         * @param options
+         */
+        scrollToView(element, options) {
+            if (!element) {
+                return;
+            }
+            if (typeof options.scrollMode !== "undefined" && typeof window.scrollIntoView === "function") {
+                window.scrollIntoView(element, options)
+                return;
+            }
+            try {
+                element.scrollIntoView(options);
+            } catch (e) {
+                if (typeof window.scrollIntoView === "function") {
+                    window.scrollIntoView(element, options)
+                }
+            }
+        }
     });
 
     /**

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

@@ -60,7 +60,7 @@
             </div>
         </ScrollerY>
         <div :class="['dialog-footer', msgNew > 0 && dialogMsgList.length > 0 ? 'newmsg' : '']" @click="onActive">
-            <div class="dialog-newmsg" @click="autoToBottom">{{$L('有' + msgNew + '条新消息')}}</div>
+            <div class="dialog-newmsg" @click="onToBottom">{{$L('有' + msgNew + '条新消息')}}</div>
             <slot name="inputBefore"/>
             <DragInput
                 ref="input"
@@ -273,7 +273,7 @@ export default {
             if (!this.isDesktop) {
                 this.$refs.input.blur();
             }
-            this.autoToBottom();
+            this.onToBottom();
             this.onActive();
             //
             this.$store.dispatch("call", {
@@ -374,7 +374,7 @@ export default {
                     if (!this.isDesktop) {
                         this.$refs.input.blur();
                     }
-                    this.autoToBottom();
+                    this.onToBottom();
                     this.onActive();
                     break;
 
@@ -414,7 +414,7 @@ export default {
                     this.autoBottom = false;
                     break;
             }
-            if (res.scale === 1) {
+            if (res.scale >= 1) {
                 this.msgNew = 0;
                 this.autoBottom = true;
             }
@@ -434,7 +434,8 @@ export default {
             this.$emit("on-active");
         },
 
-        autoToBottom() {
+        onToBottom() {
+            this.autoBottom = true;
             this.$refs.scroller && this.$refs.scroller.autoToBottom();
         },
 
@@ -457,24 +458,17 @@ export default {
             this.$store.dispatch('getDialogMoreMsgs', this.dialogId).then(() => {
                 this.$nextTick(() => {
                     this.topId = topId;
-                    let dom = document.getElementById("view_" + topId);
+                    $A.scrollToView(document.getElementById("view_" + topId), {
-                    if (dom) {
+                        behavior: 'instant',
-                        try {
+                        inline: 'start',
-                            dom.scrollIntoView(true);
+                    })
-                        } catch (e) {
-                            scrollIntoView(dom, {
-                                behavior: 'instant',
-                                inline: 'start',
-                            })
-                        }
-                    }
                 });
             }).catch(() => {})
         },
 
         addDialogMsg() {
             if (this.isAutoBottom) {
-                this.$nextTick(this.autoToBottom);
+                this.$nextTick(this.onToBottom);
             } else {
                 this.$nextTick(() => {
                     if (this.$refs.scroller && this.$refs.scroller.scrollInfo().scrollE > 10) {

resources/assets/js/pages/manage/dashboard.vue

@@ -156,17 +156,10 @@ export default {
         },
 
         scrollTo(type) {
-            try {
+            $A.scrollToView(this.$refs[`type_${type}`][0], {
-                this.$refs[`type_${type}`][0].scrollIntoView({
+                behavior: 'smooth',
-                    behavior: 'instant',
+                inline: 'end',
-                    inline: 'end',
+            });
-                });
-            } catch (e) {
-                scrollIntoView(this.$refs[`type_${type}`][0], {
-                    behavior: 'instant',
-                    inline: 'end',
-                })
-            }
         },
 
         openTask(task) {

resources/assets/js/pages/manage/messenger.vue

@@ -277,14 +277,10 @@ export default {
                 // 再次点击滚动到未读条目
                 const dialog = this.dialogList.find(({unread}) => unread > 0)
                 if (dialog) {
-                    try {
+                    $A.scrollToView(this.$refs[`dialog_${dialog.id}`][0], {
-                        this.$refs[`dialog_${dialog.id}`][0].scrollIntoView();
+                        behavior: 'instant',
-                    } catch (e) {
+                        inline: 'end',
-                        scrollIntoView(this.$refs[`dialog_${dialog.id}`][0], {
+                    })
-                            behavior: 'instant',
-                            inline: 'end',
-                        })
-                    }
                 }
             }
             this.dialogActive = type
@@ -426,7 +422,7 @@ export default {
                 if (this.$refs.list) {
                     let active = this.$refs.list.querySelector(".active")
                     if (active) {
-                        scrollIntoView(active, {
+                        $A.scrollToView(active, {
                             behavior: smooth === true ? 'smooth' : 'instant',
                             scrollMode: 'if-needed',
                         });
@@ -437,7 +433,7 @@ export default {
                             this.$nextTick(() => {
                                 let active = this.$refs.list.querySelector(".active")
                                 if (active) {
-                                    scrollIntoView(active, {
+                                    $A.scrollToView(active, {
                                         behavior: smooth === true ? 'smooth' : 'instant',
                                         scrollMode: 'if-needed',
                                     });

resources/assets/js/store/actions.js

@@ -2056,6 +2056,7 @@ export default {
         let dialog = state.cacheDialogs.find(({id}) => id == data.dialog_id);
         if (dialog && dialog.unread > 0) {
             dialog.unread--
+            dispatch("saveDialog", dialog)
         }
         //
         state.wsReadWaitList.push(data.id);
@@ -2170,7 +2171,10 @@ export default {
                                                     dialog_id: data.dialog_id
                                                 }).then(result => {
                                                     dialog.unread = result.data.unread
+                                                    dispatch("saveDialog", dialog)
                                                 }).catch(() => {});
+                                            } else {
+                                                dispatch("saveDialog", dialog)
                                             }
                                         }
                                         break;
@@ -2188,6 +2192,7 @@ export default {
                                                 // 新增未读数
                                                 state.cacheUnreads[data.id] = true;
                                                 dialog.unread++;
+                                                dispatch("saveDialog", dialog)
                                             }
                                             Store.set('dialogMsgPush', data);
                                         }