fix: mobile scroll - remove nested overflow on mobile, disable sticky thead on mobile, 2s interval
This commit is contained in:
parent
04d3219a1c
commit
f27fdca6ac
@ -80,7 +80,7 @@ function LiveTrades({ symbol }: { symbol: Symbol }) {
|
|||||||
} catch {}
|
} catch {}
|
||||||
};
|
};
|
||||||
fetch();
|
fetch();
|
||||||
const iv = setInterval(fetch, 1000);
|
const iv = setInterval(fetch, 2000); // 移动端友好:2秒刷新降低重排
|
||||||
return () => { running = false; clearInterval(iv); };
|
return () => { running = false; clearInterval(iv); };
|
||||||
}, [symbol]);
|
}, [symbol]);
|
||||||
|
|
||||||
@ -99,13 +99,14 @@ function LiveTrades({ symbol }: { symbol: Symbol }) {
|
|||||||
<span className="text-red-500 font-medium">▼ 红</span>=主动卖(空方发动)
|
<span className="text-red-500 font-medium">▼ 红</span>=主动卖(空方发动)
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
{/* 固定高度容器,内部自己滚动,不影响页面 */}
|
{/* 桌面端固定高度内滚,手机端展开不嵌套滚动 */}
|
||||||
<div className="overflow-y-auto" style={{ height: 420 }}>
|
<div className="lg:overflow-y-auto lg:h-[420px]">
|
||||||
{loading ? (
|
{loading ? (
|
||||||
<div className="flex items-center justify-center h-24 text-slate-400 text-sm">加载中...</div>
|
<div className="flex items-center justify-center h-24 text-slate-400 text-sm">加载中...</div>
|
||||||
) : (
|
) : (
|
||||||
<table className="w-full text-xs">
|
<table className="w-full text-xs">
|
||||||
<thead className="sticky top-0 bg-white z-10 shadow-sm">
|
{/* 手机端关闭sticky,避免触摸焦点被内层抢走 */}
|
||||||
|
<thead className="lg:sticky lg:top-0 bg-white z-10 shadow-sm">
|
||||||
<tr className="bg-slate-50 border-b border-slate-100">
|
<tr className="bg-slate-50 border-b border-slate-100">
|
||||||
<th className="text-left px-3 py-2 text-slate-500 font-medium">价格</th>
|
<th className="text-left px-3 py-2 text-slate-500 font-medium">价格</th>
|
||||||
<th className="text-right px-3 py-2 text-slate-500 font-medium">数量</th>
|
<th className="text-right px-3 py-2 text-slate-500 font-medium">数量</th>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user