Commit f1b6bed9 by lijiabin

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

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

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