feat:移动端表头吸附效果优化
This commit is contained in:
@@ -108,6 +108,7 @@ export default function MobileFundTable({
|
|||||||
sortBy = 'default',
|
sortBy = 'default',
|
||||||
onReorder,
|
onReorder,
|
||||||
onCustomSettingsChange,
|
onCustomSettingsChange,
|
||||||
|
stickyTop = 0,
|
||||||
}) {
|
}) {
|
||||||
const sensors = useSensors(
|
const sensors = useSensors(
|
||||||
useSensor(PointerSensor, {
|
useSensor(PointerSensor, {
|
||||||
@@ -293,16 +294,14 @@ export default function MobileFundTable({
|
|||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (typeof window === 'undefined') return;
|
if (typeof window === 'undefined') return;
|
||||||
|
|
||||||
const handleVerticalScroll = () => {
|
const handleVerticalScroll = () => {
|
||||||
console.log('scrollY', window.scrollY);
|
setShowPortalHeader(window.scrollY >= stickyTop);
|
||||||
setShowPortalHeader(window.scrollY >= 100);
|
|
||||||
};
|
};
|
||||||
|
|
||||||
handleVerticalScroll();
|
handleVerticalScroll();
|
||||||
window.addEventListener('scroll', handleVerticalScroll, { passive: true });
|
window.addEventListener('scroll', handleVerticalScroll, { passive: true });
|
||||||
return () => window.removeEventListener('scroll', handleVerticalScroll);
|
return () => window.removeEventListener('scroll', handleVerticalScroll);
|
||||||
}, []);
|
}, [stickyTop]);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const tableEl = tableContainerRef.current;
|
const tableEl = tableContainerRef.current;
|
||||||
@@ -323,11 +322,9 @@ export default function MobileFundTable({
|
|||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const tableEl = tableContainerRef.current;
|
const tableEl = tableContainerRef.current;
|
||||||
const portalEl = portalHeaderRef.current;
|
const portalEl = portalHeaderRef.current;
|
||||||
console.log('portalEl', portalEl)
|
|
||||||
if (!tableEl || !portalEl) return;
|
if (!tableEl || !portalEl) return;
|
||||||
|
|
||||||
const syncScrollToPortal = () => {
|
const syncScrollToPortal = () => {
|
||||||
console.log('tableEl.scrollLeft', tableEl.scrollLeft)
|
|
||||||
portalEl.scrollLeft = tableEl.scrollLeft;
|
portalEl.scrollLeft = tableEl.scrollLeft;
|
||||||
};
|
};
|
||||||
|
|
||||||
@@ -341,11 +338,11 @@ export default function MobileFundTable({
|
|||||||
const handlePortalScroll = () => syncScrollToTable();
|
const handlePortalScroll = () => syncScrollToTable();
|
||||||
|
|
||||||
tableEl.addEventListener('scroll', handleTableScroll, { passive: true });
|
tableEl.addEventListener('scroll', handleTableScroll, { passive: true });
|
||||||
// portalEl.addEventListener('scroll', handlePortalScroll, { passive: true });
|
portalEl.addEventListener('scroll', handlePortalScroll, { passive: true });
|
||||||
|
|
||||||
return () => {
|
return () => {
|
||||||
tableEl.removeEventListener('scroll', handleTableScroll);
|
tableEl.removeEventListener('scroll', handleTableScroll);
|
||||||
// portalEl.removeEventListener('scroll', handlePortalScroll);
|
portalEl.removeEventListener('scroll', handlePortalScroll);
|
||||||
};
|
};
|
||||||
}, [showPortalHeader]);
|
}, [showPortalHeader]);
|
||||||
|
|
||||||
@@ -823,7 +820,7 @@ export default function MobileFundTable({
|
|||||||
const renderContent = (onlyShowHeader) => {
|
const renderContent = (onlyShowHeader) => {
|
||||||
if (onlyShowHeader) {
|
if (onlyShowHeader) {
|
||||||
return (
|
return (
|
||||||
<div style={{position: 'fixed', top: 175}} className="mobile-fund-table mobile-fund-table-portal-header" ref={portalHeaderRef}>
|
<div style={{position: 'fixed', top: stickyTop}} className="mobile-fund-table mobile-fund-table-portal-header" ref={portalHeaderRef}>
|
||||||
<div
|
<div
|
||||||
className="mobile-fund-table-scroll"
|
className="mobile-fund-table-scroll"
|
||||||
style={mobileGridLayout.minWidth != null ? { minWidth: mobileGridLayout.minWidth } : undefined}
|
style={mobileGridLayout.minWidth != null ? { minWidth: mobileGridLayout.minWidth } : undefined}
|
||||||
|
|||||||
@@ -4226,6 +4226,7 @@ export default function HomePage() {
|
|||||||
currentTab={currentTab}
|
currentTab={currentTab}
|
||||||
favorites={favorites}
|
favorites={favorites}
|
||||||
sortBy={sortBy}
|
sortBy={sortBy}
|
||||||
|
stickyTop={navbarHeight + filterBarHeight - 14}
|
||||||
onReorder={handleReorder}
|
onReorder={handleReorder}
|
||||||
onRemoveFund={(row) => {
|
onRemoveFund={(row) => {
|
||||||
if (refreshing) return;
|
if (refreshing) return;
|
||||||
|
|||||||
Reference in New Issue
Block a user