feat(x-popup): 增加弹窗内列表自动定位功能- 在 x-popup 组件中添加 list-container 类名,用于后续定位操作

- 在 tangPopup.vue 中实现 scrollToCurrentItem 函数,用于滚动到当前选中的物品
- 监听弹窗显示状态,当弹窗显示时调用 scrollToCurrentItem 函数
This commit is contained in:
xingyy 2025-02-08 17:00:09 +08:00
parent 7e4fbc84ad
commit ad19345db6
2 changed files with 32 additions and 2 deletions

View File

@ -44,7 +44,7 @@ const close=()=>{
<!-- 内容区域 --> <!-- 内容区域 -->
<div class="flex-1 px-16px py-18px overflow-hidden relative"> <div class="flex-1 px-16px py-18px overflow-hidden relative">
<div class="h-full overflow-y-auto relative"> <div class="h-full overflow-y-auto relative list-container">
<slot/> <slot/>
</div> </div>
</div> </div>

View File

@ -31,6 +31,28 @@ const props = defineProps({
default: '' default: ''
} }
}) })
const scrollToCurrentItem = () => {
if (!itemList.value?.length) return
setTimeout(() => {
const currentIndex = itemList.value.findIndex(
item => auctionData.value.artwork.index === item?.index
)
if (currentIndex > -1) {
const container = document.querySelector('.list-container')
const targetElement = document.querySelectorAll('.item-wrapper')[currentIndex]
if (targetElement && container) {
const containerTop = container.getBoundingClientRect().top
const elementTop = targetElement.getBoundingClientRect().top
const scrollTop = elementTop - containerTop + container.scrollTop
container.scrollTo({
top: scrollTop,
behavior: 'smooth'
})
}
}
}, 100)
}
const emit = defineEmits(['update:show']) const emit = defineEmits(['update:show'])
const showDetailInfo=ref(null) const showDetailInfo=ref(null)
const close = () => emit('update:show', false); const close = () => emit('update:show', false);
@ -44,6 +66,13 @@ const loadMore = async () => {
const { finished } = await getArtworkList() const { finished } = await getArtworkList()
localState.value.finished = finished localState.value.finished = finished
} }
watch(()=>props.show,(newValue)=>{
if (newValue){
nextTick(()=>{
scrollToCurrentItem()
})
}
})
</script> </script>
<template> <template>
@ -68,11 +97,12 @@ const loadMore = async () => {
:finished="localState.finished" :finished="localState.finished"
finished-text="没有更多了" finished-text="没有更多了"
@load="loadMore" @load="loadMore"
> >
<div <div
v-for="(item,index) of itemList" v-for="(item,index) of itemList"
:key="item.uuid" :key="item.uuid"
class="flex mb-21px" class="flex mb-21px item-wrapper"
@click="openShow(item)" @click="openShow(item)"
> >
<div <div