| | |
| | | |
| | | export type UseScrollToBottomOption = { |
| | | chatListDom: Ref<HTMLDivElement>; |
| | | displayMessageList: ComputedRef<ChatMessage[]>; |
| | | }; |
| | | |
| | | export const useScrollToBottom = (option: UseScrollToBottomOption) => { |
| | | const { chatListDom, displayMessageList } = option; |
| | | const { chatListDom } = option; |
| | | |
| | | const scrollToBottom = () => { |
| | | if (!chatListDom.value) return; |
| | | const parent = chatListDom.value.parentElement; |
| | | if (!parent) return; |
| | | if (parent.scrollHeight > parent.clientHeight) { |
| | | parent.scrollTop = parent.scrollHeight - parent.clientHeight; |
| | | } |
| | | nextTick(() => { |
| | | |
| | | if (chatListDom.value.scrollHeight > chatListDom.value.clientHeight) { |
| | | chatListDom.value.scrollTop = chatListDom.value.scrollHeight - chatListDom.value.clientHeight; |
| | | } |
| | | }); |
| | | }; |
| | | const debounceAmisScroll = debounce(({ instance }) => { |
| | | nextTick(() => { |
| | | scrollToBottom(); |
| | | }); |
| | | scrollToBottom(); |
| | | }, 500); |
| | | |
| | | emitter.on('amis.page.ready', debounceAmisScroll); |
| | | // emitter.on('amis.page.ready', debounceAmisScroll); |
| | | |
| | | onUnmounted(()=>{ |
| | | emitter.off('amis.page.ready'); |
| | | }) |
| | | const forbidScroll = ref(false); |
| | | watch( |
| | | displayMessageList, |
| | | () => { |
| | | if (forbidScroll.value) return; |
| | | nextTick(() => scrollToBottom()); |
| | | }, |
| | | { |
| | | deep: true, |
| | | } |
| | | ); |
| | | // onUnmounted(() => { |
| | | // emitter.off('amis.page.ready'); |
| | | // }); |
| | | |
| | | onActivated(() => { |
| | | if (forbidScroll.value) return; |
| | | nextTick(() => scrollToBottom()); |
| | | scrollToBottom(); |
| | | }); |
| | | |
| | | return { |
| | | forbidScroll, |
| | | scrollToBottom, |
| | | }; |
| | | }; |