fix: 修改 EventScrollList 左右箭头为翻页功能

问题:
- 左边箭头位置 (left: -4) 超出容器,看不到
- 右边箭头点击只是滚动 400px,而不是切换页面
- 用户期望左右箭头用于翻页,而不是横向滚动

修改内容:
1. 删除滚动相关函数和状态
   - 删除 scrollLeft()、scrollRight() 函数
   - 删除 handleScroll() 监听函数
   - 删除 showLeftArrow、showRightArrow state
   - 删除 useEffect 重置滚动位置逻辑
   - 移除 useState、useEffect 导入

2. 修改箭头功能从"滚动"改为"翻页"
   - 左箭头: onClick={scrollLeft} → onClick={() => onPageChange(currentPage - 1)}
   - 右箭头: onClick={scrollRight} → onClick={() => onPageChange(currentPage + 1)}

3. 修改箭头显隐逻辑为基于页码
   - 左箭头: showLeftArrow → currentPage > 1
   - 右箭头: showRightArrow → currentPage < totalPages

4. 优化箭头位置和样式
   - 位置: left/right: "-4" → "2" (在容器内部边缘)
   - 图标尺寸: boxSize={6} → boxSize={8}
   - 按钮尺寸: size="md" → size="lg"
   - 阴影: shadow="md" → shadow="lg"
   - 明确背景色: bg="blue.500"
   - 增强 hover 效果: 放大 scale(1.1) + 加深颜色
   - 更新说明文字: "向左/右滚动" → "上一页/下一页"

预期效果:
- 左箭头点击后加载上一页数据
- 右箭头点击后加载下一页数据
- 第1页时左箭头隐藏,最后一页时右箭头隐藏
- 箭头位置清晰可见,视觉效果突出

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
zdl
2025-11-03 14:29:44 +08:00
parent d027071e98
commit 89fe0cd10b

View File

@@ -1,7 +1,7 @@
// src/views/Community/components/DynamicNewsCard/EventScrollList.js // src/views/Community/components/DynamicNewsCard/EventScrollList.js
// 横向滚动事件列表组件 // 横向滚动事件列表组件
import React, { useRef, useState, useEffect } from 'react'; import React, { useRef } from 'react';
import { import {
Box, Box,
Flex, Flex,
@@ -38,49 +38,6 @@ const EventScrollList = ({
loading = false loading = false
}) => { }) => {
const scrollContainerRef = useRef(null); const scrollContainerRef = useRef(null);
const [showLeftArrow, setShowLeftArrow] = useState(false);
const [showRightArrow, setShowRightArrow] = useState(true);
// 页码变化时,滚动到左侧起始位置
useEffect(() => {
if (scrollContainerRef.current) {
scrollContainerRef.current.scrollTo({
left: 0,
behavior: 'smooth'
});
}
}, [currentPage]);
// 滚动到左侧
const scrollLeft = () => {
if (scrollContainerRef.current) {
scrollContainerRef.current.scrollBy({
left: -400,
behavior: 'smooth'
});
}
};
// 滚动到右侧
const scrollRight = () => {
if (scrollContainerRef.current) {
scrollContainerRef.current.scrollBy({
left: 400,
behavior: 'smooth'
});
}
};
// 监听滚动位置,更新箭头显示状态
const handleScroll = (e) => {
const container = e.target;
const scrollLeft = container.scrollLeft;
const scrollWidth = container.scrollWidth;
const clientWidth = container.clientWidth;
setShowLeftArrow(scrollLeft > 0);
setShowRightArrow(scrollLeft < scrollWidth - clientWidth - 10);
};
// 时间轴样式配置 // 时间轴样式配置
const getTimelineBoxStyle = () => { const getTimelineBoxStyle = () => {
@@ -97,41 +54,49 @@ const EventScrollList = ({
<Box> <Box>
{/* 横向滚动区域 */} {/* 横向滚动区域 */}
<Box position="relative"> <Box position="relative">
{/* 左侧滚动按钮 */} {/* 左侧翻页按钮 - 上一页 */}
{showLeftArrow && ( {currentPage > 1 && (
<IconButton <IconButton
icon={<ChevronLeftIcon boxSize={6} />} icon={<ChevronLeftIcon boxSize={8} />}
position="absolute" position="absolute"
left="-4" left="2"
top="50%" top="50%"
transform="translateY(-50%)" transform="translateY(-50%)"
zIndex={2} zIndex={2}
onClick={scrollLeft} onClick={() => onPageChange(currentPage - 1)}
colorScheme="blue" colorScheme="blue"
variant="solid" variant="solid"
size="md" size="lg"
borderRadius="full" borderRadius="full"
shadow="md" shadow="lg"
aria-label="向左滚动" bg="blue.500"
_hover={{ bg: 'blue.600', transform: 'translateY(-50%) scale(1.1)' }}
_active={{ bg: 'blue.700' }}
aria-label="上一页"
title="上一页"
/> />
)} )}
{/* 右侧滚动按钮 */} {/* 右侧翻页按钮 - 下一页 */}
{showRightArrow && ( {currentPage < totalPages && (
<IconButton <IconButton
icon={<ChevronRightIcon boxSize={6} />} icon={<ChevronRightIcon boxSize={8} />}
position="absolute" position="absolute"
right="-4" right="2"
top="50%" top="50%"
transform="translateY(-50%)" transform="translateY(-50%)"
zIndex={2} zIndex={2}
onClick={scrollRight} onClick={() => onPageChange(currentPage + 1)}
colorScheme="blue" colorScheme="blue"
variant="solid" variant="solid"
size="md" size="lg"
borderRadius="full" borderRadius="full"
shadow="md" shadow="lg"
aria-label="向右滚动" bg="blue.500"
_hover={{ bg: 'blue.600', transform: 'translateY(-50%) scale(1.1)' }}
_active={{ bg: 'blue.700' }}
aria-label="下一页"
title="下一页"
/> />
)} )}
@@ -143,7 +108,6 @@ const EventScrollList = ({
gap={4} gap={4}
py={4} py={4}
px={2} px={2}
onScroll={handleScroll}
position="relative" position="relative"
css={{ css={{
'&::-webkit-scrollbar': { '&::-webkit-scrollbar': {