消息列表滚动到底部

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

@@ -96,8 +96,9 @@
         </VirtualList>
 
         <!--底部输入-->
-        <div class="dialog-footer" :class="{newmsg: msgNew > 0 && allMsgs.length > 0}" @click="onActive">
+        <div class="dialog-footer" :class="footerClass" @click="onActive">
             <div class="dialog-newmsg" @click="onToBottom">{{$L(`有${msgNew}条新消息`)}}</div>
+            <div class="dialog-goto" @click="onToBottom"><i class="taskfont">&#xe72b;</i></div>
             <DialogUpload
                 ref="chatUpload"
                 class="chat-upload"
@@ -326,6 +327,8 @@ export default {
 
             recordState: '',
             wrapperStart: 0,
+
+            scrollBalance: 0,
             scrollMoreLoad: false,
 
             replyId: 0,
@@ -428,6 +431,17 @@ export default {
             return [];
         },
 
+        footerClass() {
+            const array = [];
+            if (this.msgNew > 0 && this.allMsgs.length > 0) {
+                array.push('newmsg')
+            }
+            if (this.scrollBalance > 50) {
+                array.push('goto')
+            }
+            return array
+        },
+
         msgUnreadOnly() {
             let num = 0;
             this.cacheDialogs.some(dialog => {
@@ -910,29 +924,28 @@ export default {
             this.__onScroll && clearTimeout(this.__onScroll);
             this.__onScroll = setTimeout(_ => {
                 const {balance} = this.scrollInfo();
-                if (balance <= 10) {
+                this.scrollBalance = balance;
+                if (this.scrollBalance <= 10) {
                     this.msgNew = 0;
                 }
-            }, 100)
+                //
-            //
+                if (!this.scrollMoreLoad) {
-            if (!this.scrollMoreLoad) {
+                    let tmpPage = 0;
-                let tmpPage = 0;
+                    for (let i = range.start; i <= range.end; i++) {
-                for (let i = range.start; i <= range.end; i++) {
+                        if (tmpPage - parseInt(this.allMsgs[i]._page) > 1) {
-                    if (tmpPage - parseInt(this.allMsgs[i]._page) > 1) {
+                            this.scrollMoreLoad = true
-                        this.scrollMoreLoad = true
-                        setTimeout(_ => {
                             this.$store.dispatch("getDialogMoreMsgs", {
                                 dialog_id: this.dialogId,
                                 page: tmpPage - 1
                             }).finally(_ => {
                                 this.scrollMoreLoad = false
                             })
-                        }, 100)
+                            break;
-                        break;
+                        }
+                        tmpPage = parseInt(this.allMsgs[i]._page);
                     }
-                    tmpPage = parseInt(this.allMsgs[i]._page);
                 }
-            }
+            }, 100)
         },
 
         onBack() {

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

@@ -188,7 +188,7 @@
         padding: 16px 32px 0;
 
         .dialog-shake {
-            animation: ani-dialog-shake 500ms ease-in-out;
+            animation: ani-dialog-shake 600ms ease-in-out;
             animation-delay: 200ms;
         }
 
@@ -799,21 +799,47 @@
         margin-bottom: 16px;
 
         .dialog-newmsg {
-            display: none;
+            display: block;
             position: absolute;
-            top: -38px;
+            top: -44px;
-            right: 24px;
+            left: 50%;
             height: 30px;
             line-height: 30px;
             color: #ffffff;
             font-size: 12px;
             background-color: #555555;
             padding: 0 12px;
-            margin-bottom: 20px;
-            margin-right: 10px;
             border-radius: 16px;
             cursor: pointer;
             z-index: 2;
+            transition: all 0.3s;
+            pointer-events: none;
+            opacity: 0;
+            transform: translate(-50%, 120%);
+        }
+
+        .dialog-goto {
+            display: flex;
+            align-content: center;
+            justify-content: center;
+            position: absolute;
+            top: -48px;
+            right: 8px;
+            width: 40px;
+            height: 40px;
+            line-height: 40px;
+            color: #ffffff;
+            background-color: #555555;
+            border-radius: 50%;
+            cursor: pointer;
+            z-index: 2;
+            transition: all 0.3s;
+            pointer-events: none;
+            opacity: 0;
+            transform: translate(120%, 0);
+            .taskfont {
+                font-size: 24px;
+            }
         }
 
         .chat-upload {
@@ -844,7 +870,17 @@
 
         &.newmsg {
             .dialog-newmsg {
-                display: block;
+                pointer-events: auto;
+                opacity: 1;
+                transform: translate(-50%, 0);
+            }
+        }
+
+        &.goto {
+            .dialog-goto {
+                pointer-events: auto;
+                opacity: 1;
+                transform: translate(0, 0);
             }
         }
     }