feat: 概念股票列表支持滚动查看全部数据
This commit is contained in:
@@ -137,11 +137,48 @@ const DetailedConceptCard = ({ concept, onClick }) => {
|
|||||||
</Text>
|
</Text>
|
||||||
</HStack>
|
</HStack>
|
||||||
|
|
||||||
<SimpleGrid columns={{ base: 1 }} spacing={2}>
|
{/* 可滚动容器 - 默认显示4条,可滚动查看全部 */}
|
||||||
{concept.stocks.slice(0, 4).map((stock, idx) => (
|
<Box
|
||||||
<ConceptStockItem key={idx} stock={stock} />
|
maxH="300px"
|
||||||
))}
|
overflowY="auto"
|
||||||
</SimpleGrid>
|
pr={2}
|
||||||
|
onWheel={(e) => {
|
||||||
|
const element = e.currentTarget;
|
||||||
|
const scrollTop = element.scrollTop;
|
||||||
|
const scrollHeight = element.scrollHeight;
|
||||||
|
const clientHeight = element.clientHeight;
|
||||||
|
|
||||||
|
// 如果在滚动范围内,阻止事件冒泡到父容器
|
||||||
|
if (
|
||||||
|
(e.deltaY < 0 && scrollTop > 0) || // 向上滚动且未到顶部
|
||||||
|
(e.deltaY > 0 && scrollTop + clientHeight < scrollHeight) // 向下滚动且未到底部
|
||||||
|
) {
|
||||||
|
e.stopPropagation();
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
css={{
|
||||||
|
overscrollBehavior: 'contain', // 防止滚动链
|
||||||
|
'&::-webkit-scrollbar': {
|
||||||
|
width: '6px',
|
||||||
|
},
|
||||||
|
'&::-webkit-scrollbar-track': {
|
||||||
|
background: '#f1f1f1',
|
||||||
|
},
|
||||||
|
'&::-webkit-scrollbar-thumb': {
|
||||||
|
background: '#888',
|
||||||
|
borderRadius: '3px',
|
||||||
|
},
|
||||||
|
'&::-webkit-scrollbar-thumb:hover': {
|
||||||
|
background: '#555',
|
||||||
|
},
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<SimpleGrid columns={{ base: 1 }} spacing={2}>
|
||||||
|
{concept.stocks.map((stock, idx) => (
|
||||||
|
<ConceptStockItem key={idx} stock={stock} />
|
||||||
|
))}
|
||||||
|
</SimpleGrid>
|
||||||
|
</Box>
|
||||||
</Box>
|
</Box>
|
||||||
)}
|
)}
|
||||||
</VStack>
|
</VStack>
|
||||||
|
|||||||
Reference in New Issue
Block a user