diff --git a/pages/index/index.js b/pages/index/index.js
index 4a0aa4f..7dec3b1 100644
--- a/pages/index/index.js
+++ b/pages/index/index.js
@@ -25,8 +25,6 @@ Page({
searchSectionVisible: true,
lastScrollTop: 0,
isScrollLocked: false,
- searchSectionOpacity: 1,
- searchSectionTransform: 0,
isSearchBarFullyHidden: false,
// 回到顶部按钮
@@ -826,33 +824,23 @@ Page({
onScroll: function(e) {
const { scrollTop } = e.detail;
- let searchSectionOpacity = 1;
- let searchSectionTransform = 0;
+ // 只控制搜索区域的完全显示/隐藏状态,使用CSS类统一控制过渡效果
+ // 简化逻辑,避免iOS上的兼容性问题
let isSearchBarFullyHidden = false;
- if (scrollTop > 50) {
- // 当滚动距离超过50rpx时,开始逐渐隐藏
- const hideProgress = Math.min((scrollTop - 50) / 150, 1); // 0-1的隐藏进度,延长隐藏过程
- searchSectionOpacity = 1 - hideProgress;
- searchSectionTransform = -20 * hideProgress;
-
- // 当隐藏进度达到100%时,添加完全隐藏类
- if (hideProgress >= 1) {
- isSearchBarFullyHidden = true;
- }
+ // 增加iOS兼容性处理,使用更简单的触发逻辑
+ if (scrollTop > 150) {
+ // 当滚动距离超过150rpx时,完全隐藏搜索区域
+ isSearchBarFullyHidden = true;
}
- // 当滚动回到顶部时,重置所有状态
- if (scrollTop <= 50) {
- searchSectionOpacity = 1;
- searchSectionTransform = 0;
+ // 当滚动回到顶部时,显示搜索区域
+ if (scrollTop <= 100) {
isSearchBarFullyHidden = false;
}
- // 更新搜索框状态和样式
+ // 更新搜索框状态
this.setData({
- searchSectionOpacity: searchSectionOpacity,
- searchSectionTransform: searchSectionTransform,
isSearchBarFullyHidden: isSearchBarFullyHidden,
lastScrollTop: scrollTop
});
diff --git a/pages/index/index.wxml b/pages/index/index.wxml
index 591b201..957e915 100644
--- a/pages/index/index.wxml
+++ b/pages/index/index.wxml
@@ -4,10 +4,10 @@
class="top-section {{isSearchBarFullyHidden ? 'top-hidden' : ''}}"
>
- 专业的鸡蛋交易平台
+ 专业的鸡蛋交易平台
-
+
diff --git a/pages/index/index.wxss b/pages/index/index.wxss
index 1acdb13..746af40 100644
--- a/pages/index/index.wxss
+++ b/pages/index/index.wxss
@@ -25,11 +25,13 @@ page {
padding: 10rpx 0;
margin-bottom: 20rpx;
overflow: hidden;
- transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
+ 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;
opacity: 1;
transform: translateY(0);
+ -webkit-transform: translateY(0);
}
/* 顶部搜索区域完全隐藏状态 - 用于平滑收缩高度 */
@@ -40,6 +42,7 @@ page {
pointer-events: none;
opacity: 0;
transform: translateY(-20rpx);
+ -webkit-transform: translateY(-20rpx);
}
/* 标题样式 */