Commit f1b6bed9 by lijiabin

【需求 25171】fix: 问吧详情页翻页后自动滚动回回答列表顶部

回答列表翻页之前没有滚动,翻到后面几页时看不到"N 个回答"这个列表头部,
体验和其他分页列表(比如首页问吧列表)不一致。参考同页面回答置顶后的
滚动逻辑,翻页后统一滚回列表控制栏顶部。

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
parent 5625c0e1
......@@ -245,6 +245,7 @@
<!-- 2. 列表控制栏 -->
<div
ref="answerListRef"
class="bg-white rounded-lg border-b border-slate-100 p-6 flex justify-between items-center shadow-sm"
>
<h3 class="font-bold text-slate-800 text-base">{{ total }} 个回答</h3>
......@@ -445,7 +446,7 @@
:total="total"
layout="prev, pager, next,total"
small
@current-change="goToPage"
@current-change="handlePageChange"
/>
</div>
</div>
......@@ -497,6 +498,7 @@ const router = useRouter()
const questionId = Number(route.params.id)
const commentRefList = ref<InstanceType<typeof Comment>[]>([])
const answerRefList = ref<HTMLElement[]>([])
const answerListRef = useTemplateRef<HTMLElement>('answerListRef')
const questionDetail = ref<ArticleItemDto>({} as ArticleItemDto)
const commentDialogRef = useTemplateRef<typeof CommentDialog>('commentDialogRef')
const sendMessageDialogRef = useTemplateRef<InstanceType<typeof SendMessageDialog> | null>(
......@@ -506,6 +508,8 @@ const { showPreview, currentPreviewIndex, srcList, vImagePreview } = useImagePre
// 回滚到子评论框
const { handleBackTop: handleBackTopChildren } = useScrollTop(answerRefList)
// 翻页时滚回到回答列表顶部
const { handleBackTop: handleBackTopAnswerList } = useScrollTop(answerListRef)
const loading = computed(() => !questionDetail.value.title)
const isSelfAnswer = (answer: CommentItemDto) =>
String(answer.userId || '') === String(userInfo.value.userId || '')
......@@ -571,6 +575,11 @@ const changeSortType = (type: CommentSortTypeEnum) => {
refresh()
}
const handlePageChange = async (page: number) => {
await goToPage(page)
handleBackTopAnswerList()
}
const handleLikeArticle = async () => {
await addOrCanceArticlelLike(questionId)
questionDetail.value.hasPraised = !questionDetail.value.hasPraised
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment