尝试修复闪动问题

This commit is contained in:
张成
2025-11-08 14:02:18 +08:00
parent 45fd8c5daa
commit c6ca2269f9
4 changed files with 22 additions and 10 deletions

View File

@@ -80,6 +80,7 @@
.listPage {
background-color: #FAFAFA;
font-family: "PingFang SC";
transition: padding-top 0.3s ease-in-out; // 添加过渡动画,让布局变化更平滑
.listTopSearchWrapper {
padding: 0 15px;

View File

@@ -30,7 +30,7 @@ const ListPage = () => {
const { statusNavbarHeightInfo, getCurrentLocationInfo } =
useGlobalState() || {};
const { totalHeight } = statusNavbarHeightInfo || {};
const { totalHeight = 98 } = statusNavbarHeightInfo || {}; // 设置默认值避免从0跳到实际值
const {
listPageState,
loading,
@@ -323,7 +323,7 @@ const ListPage = () => {
// })
// }, [])
const area_city = area.at(-2);
const area_city = area?.at(-2) || "上海"; // 设置默认值,避免条件渲染的突然切换
function renderCityQrcode() {
let item = cityQrCode.find((item) => item.city_name === area_city);

View File

@@ -16,16 +16,27 @@
}
}
// 背景渐变过渡动画
@keyframes backgroundGradient {
0% {
background: #FFFFFF;
}
100% {
background: radial-gradient(
circle at 50% 0,
/* 光晕圆心在顶部中间 */ rgba(191, 255, 239, 0.9) 0px,
/* 中间更深的浅蓝 */ rgba(191, 255, 239, 0.5) 200px,
/* 100px 处开始淡化 */ #fafafa 300px,
/* 到 200px 变成白色 */ #fafafa 100% /* 200px 以下全白 */
);
}
}
// 主要内容区域
.main_content {
// position: relative;
background: radial-gradient(
circle at 50% 0,
/* 光晕圆心在顶部中间 */ rgba(191, 255, 239, 0.9) 0px,
/* 中间更深的浅蓝 */ rgba(191, 255, 239, 0.5) 200px,
/* 100px 处开始淡化 */ #fafafa 300px,
/* 到 200px 变成白色 */ #fafafa 100% /* 200px 以下全白 */
);
background: #FFFFFF;
animation: backgroundGradient 0.6s ease-in-out forwards;
z-index: 5;
flex: 1;
margin-top: 0;