feat(x-popup): 增加弹窗内列表自动定位功能- 在 x-popup 组件中添加 list-container 类名,用于后续定位操作
- 在 tangPopup.vue 中实现 scrollToCurrentItem 函数,用于滚动到当前选中的物品 - 监听弹窗显示状态,当弹窗显示时调用 scrollToCurrentItem 函数
This commit is contained in:
parent
7e4fbc84ad
commit
ad19345db6
@ -44,7 +44,7 @@ const close=()=>{
|
||||
|
||||
<!-- 内容区域 -->
|
||||
<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/>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -31,6 +31,28 @@ const props = defineProps({
|
||||
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 showDetailInfo=ref(null)
|
||||
const close = () => emit('update:show', false);
|
||||
@ -44,6 +66,13 @@ const loadMore = async () => {
|
||||
const { finished } = await getArtworkList()
|
||||
localState.value.finished = finished
|
||||
}
|
||||
watch(()=>props.show,(newValue)=>{
|
||||
if (newValue){
|
||||
nextTick(()=>{
|
||||
scrollToCurrentItem()
|
||||
})
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@ -68,11 +97,12 @@ const loadMore = async () => {
|
||||
:finished="localState.finished"
|
||||
finished-text="没有更多了"
|
||||
@load="loadMore"
|
||||
|
||||
>
|
||||
<div
|
||||
v-for="(item,index) of itemList"
|
||||
:key="item.uuid"
|
||||
class="flex mb-21px"
|
||||
class="flex mb-21px item-wrapper"
|
||||
@click="openShow(item)"
|
||||
>
|
||||
<div
|
||||
|
Loading…
Reference in New Issue
Block a user