leemuzi/real-time-fund
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat：移动端列表左侧固定样式优化

Browse Source
This commit is contained in:
hzm
2026-03-07 20:38:34 +08:00
parent 56e20211e4
commit 24eb21fd29
2 changed files with 25 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
app/components/MobileFundTable.jsx
View File

@@ -276,6 +276,7 @@ export default function MobileFundTable({
const [settingModalOpen, setSettingModalOpen] = useState(false);
const tableContainerRef = useRef(null);
const [tableContainerWidth, setTableContainerWidth] = useState(0);
const [isScrolled, setIsScrolled] = useState(false);
useEffect(() => {
const el = tableContainerRef.current;
@@ -287,6 +288,17 @@ export default function MobileFundTable({
return () => ro.disconnect();
}, []);
useEffect(() => {
const el = tableContainerRef.current;
if (!el) return;
const handleScroll = () => {
setIsScrolled(el.scrollLeft > 0);
};
handleScroll();
el.addEventListener('scroll', handleScroll, { passive: true });
return () => el.removeEventListener('scroll', handleScroll);
}, []);
const NAME_CELL_WIDTH = 140;
const GAP = 12;
const LAST_COLUMN_EXTRA = 12;
@@ -716,7 +728,11 @@ export default function MobileFundTable({
})();
const getPinClass = (columnId, isHeader) => {
if (columnId === 'fundName') return isHeader ? 'table-header-cell-pin-left' : 'table-cell-pin-left';
if (columnId === 'fundName') {
const baseClass = isHeader ? 'table-header-cell-pin-left' : 'table-cell-pin-left';
const scrolledClass = isScrolled ? 'is-scrolled' : '';
return `${baseClass} ${scrolledClass}`.trim();
}
return '';
};

12
app/globals.css
View File

@@ -1586,13 +1586,17 @@ input[type="number"] {
position: sticky;
left: 0;
z-index: 2;
box-shadow: 4px 0 10px -2px rgba(0, 0, 0, 0.12);
border-right: 1px solid rgba(0, 0, 0, 0.08);
border-bottom: none;
}
[data-theme="light"] .mobile-fund-table .table-header-cell-pin-left,
[data-theme="light"] .mobile-fund-table .table-cell-pin-left {
.mobile-fund-table .table-header-cell-pin-left .is-scrolled,
.mobile-fund-table .table-cell-pin-left .is-scrolled {
box-shadow: 4px 0 10px -2px rgba(0, 0, 0, 0.12);
border-right: 1px solid rgba(0, 0, 0, 0.08);
}
[data-theme="light"] .mobile-fund-table .table-header-cell-pin-left .is-scrolled,
[data-theme="light"] .mobile-fund-table .table-cell-pin-left .is-scrolled {
box-shadow: 4px 0 10px -2px rgba(0, 0, 0, 0.08);
border-right-color: rgba(0, 0, 0, 0.06);
}