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="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>
|
||||||
|
@ -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
|
||||||
|
Loading…
Reference in New Issue
Block a user