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:
@@ -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': {
|
||||
|
||||
Reference in New Issue
Block a user