diff --git a/pages/index/index.wxss b/pages/index/index.wxss index 746af40..c3cd2af 100644 --- a/pages/index/index.wxss +++ b/pages/index/index.wxss @@ -25,24 +25,28 @@ page { padding: 10rpx 0; margin-bottom: 20rpx; overflow: hidden; - transition: max-height 0.4s ease-in-out, opacity 0.4s ease-in-out, transform 0.4s ease-in-out, margin-bottom 0.4s ease-in-out, padding 0.4s ease-in-out; - -webkit-transition: max-height 0.4s ease-in-out, opacity 0.4s ease-in-out, -webkit-transform 0.4s ease-in-out, margin-bottom 0.4s ease-in-out, padding 0.4s ease-in-out; - will-change: opacity, transform, max-height, margin; - max-height: 200rpx; + transition: opacity 0.4s ease-in-out, transform 0.4s ease-in-out; + -webkit-transition: opacity 0.4s ease-in-out, -webkit-transform 0.4s ease-in-out; + will-change: opacity, transform; opacity: 1; transform: translateY(0); -webkit-transform: translateY(0); + /* 使用固定高度,避免iOS系统重新计算布局 */ + height: 180rpx; } -/* 顶部搜索区域完全隐藏状态 - 用于平滑收缩高度 */ +/* 顶部搜索区域完全隐藏状态 - 使用transform隐藏,避免影响页面布局 */ .top-hidden { - max-height: 0; - padding: 0; - margin-bottom: 0; pointer-events: none; opacity: 0; - transform: translateY(-20rpx); - -webkit-transform: translateY(-20rpx); + /* 使用transform将搜索区域移出视口,而不是改变高度 */ + transform: translateY(-100%); + -webkit-transform: translateY(-100%); + /* 保留固定高度,避免页面布局变化 */ + height: 180rpx; + /* 保留padding和margin,避免页面布局变化 */ + padding: 10rpx 0; + margin-bottom: 20rpx; } /* 标题样式 */