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