【代码优化】移除 z-paging 组件使用 uniapp 原生 scroll-view 实现区域滚动

2025-05-07 18:05:48 +08:00
parent 336e0efb8d
commit 7e6a3bbad3
43 changed files with 200 additions and 8135 deletions
@@ -1,29 +1,22 @@
 <template>
-  <!--  聊天虚拟列表  -->
-  <z-paging
-    ref="pagingRef"
-    v-model="messageList"
-    use-chat-record-mode
-    use-virtual-list
-    cell-height-mode="dynamic"
-    default-page-size="20"
-    :auto-clean-list-when-reload="false"
-    safe-area-inset-bottom
-    bottom-bg-color="#f8f8f8"
-    :back-to-top-style="backToTopStyle"
-    :auto-show-back-to-top="showNewMessageTip"
-    @backToTopClick="onBackToTopClick"
-    @scrolltoupper="onScrollToUpper"
-    @query="queryList"
+  <!--  聊天列表使用scroll-view原生组件  -->
+  <scroll-view
+    ref="scrollRef"
+    class="chat-scroll-view"
+    scroll-y
+    :scroll-top="scrollTop"
+    :refresher-enabled="true"
+    :refresher-triggered="isTriggered"
+    @scrolltolower="onScrollToLower"
+    @refresherrefresh="onRefresh"
+    @scroll="onScroll"
  >
-    <template #top>
-      <!-- 撑一下顶部导航 -->
-      <view :style="{ height: sys_navBar + 'px' }"></view>
-    </template>
-    <!-- style="transform: scaleY(-1)"必须写，否则会导致列表倒置！！！ -->
-    <!-- 注意不要直接在chat-item组件标签上设置style，因为在微信小程序中是无效的，请包一层view -->
-    <template #cell="{ item, index }">
-      <view style="transform: scaleY(-1)">
+    <!-- 撑一下顶部导航 -->
+    <view :style="{ height: sys_navBar + 'px' }"></view>
+
+    <!-- 消息列表 -->
+    <view class="message-list" :style="{ transform: 'scaleY(-1)' }">
+      <view v-for="(item, index) in messageList" :key="item.id" style="transform: scaleY(-1)">
        <!--  消息渲染  -->
        <MessageListItem
          :message="item"
@@ -31,109 +24,217 @@
          :message-list="messageList"
        ></MessageListItem>
      </view>
-    </template>
+
+      <!-- 加载更多提示 -->
+      <view v-if="loadingMore" class="loading-more">加载更多...</view>
+    </view>
+
    <!-- 底部聊天输入框 -->
-    <template #bottom>
+    <su-fixed bottom>
      <slot name="bottom"></slot>
-    </template>
-    <!-- 查看最新消息 -->
-    <template #backToTop>
+    </su-fixed>
+    <!-- 查看最新消息提示 -->
+    <view v-if="showNewMessageTip" class="new-message-tip" @click="scrollToBottom">
      <text>有新消息</text>
-    </template>
-  </z-paging>
+    </view>
+  </scroll-view>
 </template>

 <script setup>
  import MessageListItem from '@/pages/chat/components/messageListItem.vue';
-  import { reactive, ref } from 'vue';
+  import { reactive, ref, nextTick, watch } from 'vue';
  import KeFuApi from '@/sheep/api/promotion/kefu';
  import { isEmpty } from '@/sheep/helper/utils';
  import sheep from '@/sheep';
  import { formatDate } from '@/sheep/util';

  const sys_navBar = sheep.$platform.navbar;
+  const scrollRef = ref(null); // 添加对scroll-view的引用
  const messageList = ref([]); // 消息列表
  const showNewMessageTip = ref(false); // 显示有新消息提示
-  const refreshMessage = ref(false); // 更新消息列表
-  const backToTopStyle = reactive({
-    width: '100px',
-    'background-color': '#fff',
-    'border-radius': '30px',
-    'box-shadow': '0 2px 4px rgba(0, 0, 0, 0.1)',
-    display: 'flex',
-    justifyContent: 'center',
-    alignItems: 'center',
-  }); // 返回顶部样式
+  const isRefreshing = ref(false); // 是否正在刷新
+  const isTriggered = ref(false); // 下拉刷新状态
+  const loadingMore = ref(false); // 是否正在加载更多
+  const scrollTop = ref(0); // 滚动位置
+  const lastScrollTop = ref(0); // 上次滚动位置
+  const hasReachedBottom = ref(true); // 是否滚动到底部
+  const forceUpdate = ref(0); // 强制更新计数器
+
  const queryParams = reactive({
    no: 1, // 查询次数，只用于触底计算
    limit: 20,
    createTime: undefined,
  });
-  const pagingRef = ref(null); // 虚拟列表
-  const queryList = async (no, limit) => {
-    // 组件加载时会自动触发此方法，因此默认页面加载时会自动触发，无需手动调用
-    queryParams.no = no;
-    queryParams.limit = limit;
+
+  // 监听消息列表变化，自动滚动到底部
+  watch(messageList, (newVal, oldVal) => {
+    // 如果是添加了新消息 且 (在底部 或 列表初始加载)
+    if (newVal.length > oldVal.length && (hasReachedBottom.value || oldVal.length === 0)) {
+      nextTick(() => {
+        scrollToBottom(true);
+      });
+    }
+  });
+
+  // 获取消息分页列表
+  const getMessageList = async (isRefresh = false) => {
+    if (isRefresh) {
+      queryParams.createTime = undefined;
+      queryParams.no = 1;
+    }
+
+    loadingMore.value = true;
+    try {
+      const { data } = await KeFuApi.getKefuMessageList(queryParams);
+      if (isEmpty(data)) {
+        loadingMore.value = false;
+        return;
+      }
+
+      if (isRefresh) {
+        messageList.value = data;
+      } else {
+        messageList.value = [...messageList.value, ...data];
+      }
+
+      if (data.slice(-1).length > 0) {
+        // 设置最后一次历史查询的最后一条消息的 createTime
+        queryParams.createTime = formatDate(data.slice(-1)[0].createTime);
+      }
+
+      // 刷新完成后滚动到底部
+      if (isRefresh) {
+        setTimeout(() => {
+          scrollToBottom(true);
+        }, 300);
+      }
+    } catch (error) {
+      console.error('获取消息列表失败:', error);
+    } finally {
+      loadingMore.value = false;
+      isTriggered.value = false;
+    }
+  };
+
+  // 下拉刷新
+  const onRefresh = async () => {
+    isTriggered.value = true;
+    isRefreshing.value = true;
+    await getMessageList(true);
+    isRefreshing.value = false;
+    setTimeout(() => {
+      isTriggered.value = false;
+    }, 500);
+  };
+
+  // 上拉加载更多
+  const onScrollToLower = async () => {
+    if (loadingMore.value) return;
+    queryParams.no++;
    await getMessageList();
  };
-  // 获得消息分页列表
-  const getMessageList = async () => {
-    const { data } = await KeFuApi.getKefuMessageList(queryParams);
-    if (isEmpty(data)) {
-      pagingRef.value.completeByNoMore([], true);
-      return;
-    }
-    if (queryParams.no > 1 && refreshMessage.value) {
-      const newMessageList = [];
-      for (const message of data) {
-        if (messageList.value.some((val) => val.id === message.id)) {
-          continue;
-        }
-        newMessageList.push(message);
-      }
-      // 新消息追加到开头
-      messageList.value = [...newMessageList, ...messageList.value];
-      pagingRef.value.updateCache(); // 更新缓存
-      refreshMessage.value = false; // 更新好后重置状态
-      return;
-    }
-    if (data.slice(-1).length > 0) {
-      // 设置最后一次历史查询的最后一条消息的 createTime
-      queryParams.createTime = formatDate(data.slice(-1)[0].createTime);
-    }
-    pagingRef.value.completeByNoMore(data, false);
-  };
-  /** 刷新消息列表 */
-  const refreshMessageList = async (message = undefined) => {
-    if (typeof message !== 'undefined') {
-      // 追加数据
-      pagingRef.value.addChatRecordData([message], false);
-    } else {
-      queryParams.createTime = undefined;
-      refreshMessage.value = true;
-      await getMessageList();
-    }

-    // 若已是第一页则不做处理
-    if (queryParams.no > 1) {
+  // 监听滚动事件
+  const onScroll = (e) => {
+    lastScrollTop.value = e.detail.scrollTop;
+
+    // 判断是否滚动到底部 - 修正计算方法
+    const scrollHeight = e.detail.scrollHeight;
+    const scrollTop = e.detail.scrollTop;
+    const clientHeight = e.detail.scrollHeight - scrollHeight; // 近似计算可见区域高度
+
+    // 如果滚动位置到顶部（反转后是底部）的距离很小，则认为已到底部
+    hasReachedBottom.value = scrollTop <= 10;
+
+    // 如果不在底部且有未读消息，显示新消息提示
+    if (!hasReachedBottom.value) {
      showNewMessageTip.value = true;
    } else {
-      onScrollToUpper();
+      showNewMessageTip.value = false;
    }
  };

-  /** 滚动到最新消息 */
-  const onBackToTopClick = (event) => {
-    event(false); // 禁用默认操作
-    pagingRef.value.scrollToBottom();
-  };
-  /** 监听滚动到底部事件（因为 scroll 翻转了顶就是底） */
-  const onScrollToUpper = () => {
-    // 若已是第一页则不做处理
-    if (queryParams.no === 1) {
-      return;
+  // 滚动到底部
+  const scrollToBottom = (force = false) => {
+    // 因为列表是倒置的，所以滚动到顶部就是滚动到最新消息
+    if (force) {
+      // 在某些情况下，直接设置scrollTop可能不会触发更新
+      // 使用一个计数器强制视图更新
+      forceUpdate.value++;
+      setTimeout(() => {
+        scrollTop.value = 0;
+      }, 50);
+    } else {
+      scrollTop.value = 0;
    }
+
    showNewMessageTip.value = false;
+    hasReachedBottom.value = true;
  };
-  defineExpose({ getMessageList, refreshMessageList });
+
+  // 刷新消息列表 - 优化处理新消息
+  const refreshMessageList = async (message = undefined) => {
+    if (typeof message !== 'undefined') {
+      // 追加新消息
+      messageList.value = [message, ...messageList.value];
+
+      // 如果当前在底部，滚动到新消息
+      if (hasReachedBottom.value) {
+        // 等待DOM更新后滚动
+        nextTick(() => {
+          scrollToBottom(true);
+        });
+      } else {
+        showNewMessageTip.value = true;
+      }
+    } else {
+      // 全量刷新
+      await getMessageList(true);
+    }
+  };
+
+  // 初始化加载数据
+  getMessageList(true);
+
+  // 暴露方法给父组件
+  defineExpose({
+    getMessageList,
+    refreshMessageList
+  });
 </script>
+
+<style>
+  .chat-scroll-view {
+    height: calc(100vh - 100px); /* 减去底部输入框的高度 */
+    width: 100%;
+    position: relative;
+    background-color: #f8f8f8;
+  }
+
+  .message-list {
+    transform: scaleY(-1); /* 聊天列表倒置，让最新消息在底部 */
+    width: 100%;
+    padding-bottom: 20rpx;
+  }
+
+  .loading-more {
+    text-align: center;
+    color: #999;
+    font-size: 24rpx;
+    padding: 20rpx 0;
+  }
+
+  .new-message-tip {
+    position: fixed;
+    bottom: 140rpx;
+    left: 50%;
+    transform: translateX(-50%);
+    background-color: #fff;
+    padding: 10rpx 30rpx;
+    border-radius: 30rpx;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    z-index: 100;
+    font-size: 24rpx;
+    color: #333;
+  }
+</style>