From 89fe0cd10bf69421a68cdca5f637adbef2b90f47 Mon Sep 17 00:00:00 2001
From: zdl <3489966805@qq.com>
Date: Mon, 3 Nov 2025 14:29:44 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E6=94=B9=20EventScrollList=20?=
 =?UTF-8?q?=E5=B7=A6=E5=8F=B3=E7=AE=AD=E5=A4=B4=E4=B8=BA=E7=BF=BB=E9=A1=B5?=
 =?UTF-8?q?=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

问题：
- 左边箭头位置 (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>
---
 .../DynamicNewsCard/EventScrollList.js        | 86 ++++++-------------
 1 file changed, 25 insertions(+), 61 deletions(-)

diff --git a/src/views/Community/components/DynamicNewsCard/EventScrollList.js b/src/views/Community/components/DynamicNewsCard/EventScrollList.js
index 413e2256..77fe5289 100644
--- a/src/views/Community/components/DynamicNewsCard/EventScrollList.js
+++ b/src/views/Community/components/DynamicNewsCard/EventScrollList.js
@@ -1,7 +1,7 @@
 // src/views/Community/components/DynamicNewsCard/EventScrollList.js
 // 横向滚动事件列表组件
 
-import React, { useRef, useState, useEffect } from 'react';
+import React, { useRef } from 'react';
 import {
   Box,
   Flex,
@@ -38,49 +38,6 @@ const EventScrollList = ({
   loading = false
 }) => {
   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 = () => {
@@ -97,41 +54,49 @@ const EventScrollList = ({
     <Box>
       {/* 横向滚动区域 */}
       <Box position="relative">
-        {/* 左侧滚动按钮 */}
-      {showLeftArrow && (
+        {/* 左侧翻页按钮 - 上一页 */}
+      {currentPage > 1 && (
         <IconButton
-          icon={<ChevronLeftIcon boxSize={6} />}
+          icon={<ChevronLeftIcon boxSize={8} />}
           position="absolute"
-          left="-4"
+          left="2"
           top="50%"
           transform="translateY(-50%)"
           zIndex={2}
-          onClick={scrollLeft}
+          onClick={() => onPageChange(currentPage - 1)}
           colorScheme="blue"
           variant="solid"
-          size="md"
+          size="lg"
           borderRadius="full"
-          shadow="md"
-          aria-label="向左滚动"
+          shadow="lg"
+          bg="blue.500"
+          _hover={{ bg: 'blue.600', transform: 'translateY(-50%) scale(1.1)' }}
+          _active={{ bg: 'blue.700' }}
+          aria-label="上一页"
+          title="上一页"
         />
       )}
 
-      {/* 右侧滚动按钮 */}
-      {showRightArrow && (
+      {/* 右侧翻页按钮 - 下一页 */}
+      {currentPage < totalPages && (
         <IconButton
-          icon={<ChevronRightIcon boxSize={6} />}
+          icon={<ChevronRightIcon boxSize={8} />}
           position="absolute"
-          right="-4"
+          right="2"
           top="50%"
           transform="translateY(-50%)"
           zIndex={2}
-          onClick={scrollRight}
+          onClick={() => onPageChange(currentPage + 1)}
           colorScheme="blue"
           variant="solid"
-          size="md"
+          size="lg"
           borderRadius="full"
-          shadow="md"
-          aria-label="向右滚动"
+          shadow="lg"
+          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}
         py={4}
         px={2}
-        onScroll={handleScroll}
         position="relative"
         css={{
           '&::-webkit-scrollbar': {