滚动置底部

wujingjing

2024-12-05 d257f90aecbd2ae44de5bf19489b3e82943cb712

 src/components/chat/hooks/useScrollToBottom.ts

@@ -1,5 +1,5 @@
import type { ComputedRef, Ref } from 'vue';
import { nextTick, onActivated, onUnmounted, ref, watch } from 'vue';
import { nextTick, onActivated, onMounted, onUnmounted, ref, watch } from 'vue';
import type { ChatMessage } from '../model/types';
import emitter from '/@/utils/mitt';
import { debounce } from '/@/utils/util';
@@ -28,6 +28,19 @@
      scrollToBottom();
   }, 500);

   const checkIsBottom = () => {
      // 误差 2像素
      isBottom.value = Math.abs(chatListDom.value.scrollTop + chatListDom.value.clientHeight - chatListDom.value.scrollHeight) < 2;
   };
   const isBottom = ref(false);
   onMounted(() => {
      chatListDom.value.addEventListener('scrollend', checkIsBottom);
   });

   onUnmounted(() => {
      chatListDom.value.removeEventListener('scrollend', checkIsBottom);
   });

   // emitter.on('amis.page.ready', debounceAmisScroll);

   // onUnmounted(() => {
@@ -41,5 +54,6 @@
   return {
      scrollToBottom,
      scrollToTop,
      isBottom,
   };
};