修改聊天记录

src/views/user/user/chat.vue

@@ -6,7 +6,7 @@
           <cSearch :is_back="true" @toBack="toBack"></cSearch>
         </el-col>
         <el-col :span="14" class="two">
-          <div style="overflow: auto" v-scrollBottom>
+          <div style="overflow: auto" ref="chatContent">
             <ul v-infinite-scroll="load" class="infinite-list">
               <el-col :span="24" class="list" v-for="item in list" :key="item._id">
                 <el-col :span="24" class="two_1" v-if="item.speaker == user._id">
@@ -63,7 +63,7 @@
 // 基础
 import moment from 'moment';
 import type { Ref } from 'vue';
-import { onMounted, ref, getCurrentInstance } from 'vue';
+import { onMounted, ref, nextTick, getCurrentInstance } from 'vue';
 import { useRoute } from 'vue-router';
 import store from '@/stores/counter';
 import { ElMessage } from 'element-plus';
@@ -74,6 +74,7 @@ import { UserStore } from '@/stores/users/user';
 import type { IQueryResult } from '@/util/types.util';
 const { proxy } = getCurrentInstance() as any;
 
+const chatContent: Ref<any> = ref(null);
 const chatAxios = ChatStore();
 const configAxios = ConfigStore();
 const userAxios = UserStore();
@@ -97,6 +98,7 @@ onMounted(async () => {
   loading.value = true;
   await searchOther();
   await search({ skip, limit });
+  await toBottom();
   loading.value = false;
 });
 const search = async (e: { skip: number; limit: number }) => {
@@ -139,7 +141,8 @@ const toSend = async () => {
   if (res.errcode == 0) {
     ElMessage({ type: `success`, message: `发送消息信息成功` });
     input.value = '';
-    search({ skip, limit });
+    await search({ skip, limit });
+    await toBottom();
   }
 };
 // 上传
@@ -152,7 +155,8 @@ const onUpload = async (e: { value: Array<any> }) => {
   if (res.errcode == 0) {
     ElMessage({ type: `success`, message: `发送消息信息成功` });
     file.value = [];
-    search({ skip, limit });
+    await search({ skip, limit });
+    await toBottom();
   }
 };
 // 下拉查看聊天记录
@@ -167,6 +171,11 @@ const load = () => {
 const toBack = () => {
   window.history.go(-1);
 };
+const toBottom = () => {
+  nextTick(() => {
+    chatContent.value.scrollTop = chatContent.value.scrollHeight;
+  });
+};
 </script>
 <style scoped lang="scss">
 .main {
@@ -234,7 +243,6 @@ const toBack = () => {
             background: #16f80f;
           }
         }
-
       }
     }
   }