分页聊天

src/components/ChatInfo.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="chat-info" :class="{ isLeft: flow == 'in' }">
+    <div class="chat-info" :class="{ isLeft: flow == 'in' }" :id="`chat_${info.id || info.time}`">
         <div class="chat-time" v-if="timeStr">{{ timeStr }}</div>
         <div class="chat-time" v-if="type == 'notification'">{{ noticeStr }}</div>
         <div class="chat-content" v-else>

src/stickers.json

@@ -304,10 +304,6 @@
         "name": "9d184d91-0f17-4e79-a7e5-c9196251a7bb.gif",
         "url": "https://raex-meta.oss-cn-shenzhen.aliyuncs.com/setting/emojis/9d184d91-0f17-4e79-a7e5-c9196251a7bb.gif"
     },
-    {
-        "name": "9e260100-56ce-400f-9486-85da1f25a9a8.gif",
-        "url": "https://raex-meta.oss-cn-shenzhen.aliyuncs.com/setting/emojis/9e260100-56ce-400f-9486-85da1f25a9a8.gif"
-    },
     {
         "name": "9f5c8fd4-27c9-4cbd-a661-67ef48c5b53a.png",
         "url": "https://raex-meta.oss-cn-shenzhen.aliyuncs.com/setting/emojis/9f5c8fd4-27c9-4cbd-a661-67ef48c5b53a.png"

src/views/chat/Detail.vue

@@ -28,12 +28,17 @@
             @click="toggleEmoji(false)"
             ref="listRef"
         >
-            <chat-info
-                v-for="(item, index) in list"
-                :key="index"
-                :info="item"
-                :beforeTime="index > 0 ? list[index - 1].time : ''"
-            ></chat-info>
+            <van-pull-refresh v-model="isLoading" @refresh="onRefresh" :disabled="finishedPage">
+                <div class="tips" v-if="finishedPage">没有更多了</div>
+                <div class="chat-list" ref="chatRef">
+                    <chat-info
+                        v-for="(item, index) in list"
+                        :key="index"
+                        :info="item"
+                        :beforeTime="index > 0 ? list[index - 1].time : ''"
+                    ></chat-info>
+                </div>
+            </van-pull-refresh>
         </div>
 
         <div class="message-bottom" :style="{ height: showEmoji ? '352px' : '60px' }">
@@ -101,7 +106,6 @@
         </div>
     </div>
 </template>
-
 <script setup>
 import { ref, onMounted, computed, getCurrentInstance, onUnmounted } from 'vue';
 import ChatInfo from '../../components/ChatInfo.vue';
@@ -176,12 +180,45 @@ async function sendMsg(msg = '', toTeamId, onSendBefore, type = 'Text', scene =
     );
 }
 
-function getHistroy() {
-    return global.$http.post('/neteaseMessage/record', {
-        toId: teamId.value,
-        ope: 1
+const finishedPage = ref(false);
+const isLoading = ref(false);
+const loadingList = ref(false);
+const page = ref(0);
+const chatRef = ref(null);
+function onRefresh() {
+    if (loadingList.value) {
+        return;
+    }
+    let _id = chatRef.value.children[0].id;
+    getHistroy().then(() => {
+        isLoading.value = false;
+        console.log(document.getElementById(_id).offsetTop);
+        listRef.value.scrollTop = document.getElementById(_id).offsetTop - 50;
     });
 }
+function getHistroy() {
+    if (finishedPage.value) {
+        return Promise.resolve();
+    }
+    loadingList.value = true;
+
+    return global.$http
+        .post('/neteaseMessage/record', {
+            toId: teamId.value,
+            ope: 1,
+            size: 100,
+            page: page.value
+        })
+        .then(res => {
+            loadingList.value = false;
+            finishedPage.value = res.last;
+            if (!finishedPage.value) {
+                page.value = page.value + 1;
+            }
+            list.value = getPushMsg(res.content, list.value);
+            return Promise.resolve();
+        });
+}
 
 const send = () => {
     sendMsg(message.value, teamId.value, msg => {
@@ -299,13 +336,10 @@ onMounted(() => {
                 message: '加载中...',
                 forbidClick: true
             });
-            getHistroy(teamId.value).then(value => {
-                console.log(value.content);
-                list.value = getPushMsg(value.content, list.value);
-                console.log(list.value);
+            getHistroy(teamId.value).then(res => {
                 nextTick(() => {
-                    global.$toast.clear();
                     goBottom();
+                    global.$toast.clear();
                 });
             });
             nim.on('msg', msg => {
@@ -477,4 +511,10 @@ onUnmounted(() => {
     --van-font-weight-bold: bold;
     padding-top: var(--safe-top);
 }
+.tips {
+    color: #ffffff50;
+    font-size: 12px;
+    text-align: center;
+    padding-bottom: 20px;
+}
 </style>