From 5dbfd7014656a930b934700abd4e65947319d4ce Mon Sep 17 00:00:00 2001
From: Trae AI <trae@example.com>
Date: Sat, 27 Dec 2025 11:19:30 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AE=9E=E7=8E=B0=E6=90=9C=E7=B4=A2=E6=A1=86?=
 =?UTF-8?q?=E4=B8=8B=E6=BB=91=E9=9A=90=E8=97=8F=E4=B8=8A=E6=BB=91=E5=B1=95?=
 =?UTF-8?q?=E7=A4=BA=EF=BC=8C=E9=80=89=E6=8B=A9=E6=97=B6=E5=9B=BA=E5=AE=9A?=
 =?UTF-8?q?=E5=B1=95=E7=A4=BA=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/index/index.js   | 47 +++++++++++++++++++++++++++++++-----------
 pages/index/index.wxml |  2 ++
 pages/index/index.wxss | 26 +++++++++--------------
 3 files changed, 47 insertions(+), 28 deletions(-)

diff --git a/pages/index/index.js b/pages/index/index.js
index 8f8d15c..f4de797 100644
--- a/pages/index/index.js
+++ b/pages/index/index.js
@@ -26,6 +26,7 @@ Page({
     lastScrollTop: 0,
     isScrollLocked: false,
     isSearchBarFullyHidden: false,
+    isSearchBarFocused: false,
     
     // 回到顶部按钮
     showBackToTop: false,
@@ -688,6 +689,23 @@ Page({
     })
   },
   
+  // 搜索框获得焦点
+  onSearchFocus: function() {
+    // 当搜索框获得焦点时，固定显示搜索框，不隐藏
+    this.setData({
+      isSearchBarFocused: true,
+      isSearchBarFullyHidden: false
+    })
+  },
+  
+  // 搜索框失去焦点
+  onSearchBlur: function() {
+    // 当搜索框失去焦点时，恢复正常的隐藏逻辑
+    this.setData({
+      isSearchBarFocused: false
+    })
+  },
+  
   // 切换地区选择器
   toggleRegionPicker: function() {
     this.setData({
@@ -848,20 +866,25 @@ Page({
   // 滚动事件处理
   onScroll: function(e) {
     const { scrollTop } = e.detail;
+    const lastScrollTop = this.data.lastScrollTop;
     
     // 只控制搜索区域的完全显示/隐藏状态，使用CSS类统一控制过渡效果
-    // 简化逻辑，避免iOS上的兼容性问题
-    let isSearchBarFullyHidden = false;
-    
-    // 增加iOS兼容性处理，使用更简单的触发逻辑
-    if (scrollTop > 150) {
-      // 当滚动距离超过150rpx时，完全隐藏搜索区域
-      isSearchBarFullyHidden = true;
-    }
-    
-    // 当滚动回到顶部时，显示搜索区域
-    if (scrollTop <= 100) {
-      isSearchBarFullyHidden = false;
+    let isSearchBarFullyHidden = this.data.isSearchBarFullyHidden;
+    
+    // 如果搜索框被选中，则不隐藏
+    if (!this.data.isSearchBarFocused) {
+      // 判断滚动方向
+      if (scrollTop > lastScrollTop) {
+        // 向下滚动，隐藏搜索框
+        if (scrollTop > 150) {
+          isSearchBarFullyHidden = true;
+        }
+      } else {
+        // 向上滚动，显示搜索框
+        if (scrollTop <= 100) {
+          isSearchBarFullyHidden = false;
+        }
+      }
     }
     
     // 更新搜索框状态
diff --git a/pages/index/index.wxml b/pages/index/index.wxml
index 5ac2070..fa586e9 100644
--- a/pages/index/index.wxml
+++ b/pages/index/index.wxml
@@ -23,6 +23,8 @@
             placeholder-class="search-placeholder"
             value="{{searchKeyword}}"
             bindinput="onSearchInput"
+            bindfocus="onSearchFocus"
+            bindblur="onSearchBlur"
           />
         </view>
         <button class="search-button" bindtap="searchGoods">搜索</button>
diff --git a/pages/index/index.wxss b/pages/index/index.wxss
index 3618a7f..746af40 100644
--- a/pages/index/index.wxss
+++ b/pages/index/index.wxss
@@ -25,30 +25,24 @@ page {
   padding: 10rpx 0;
   margin-bottom: 20rpx;
   overflow: hidden;
-  transition: opacity 0.4s ease-in-out, transform 0.4s ease-in-out, visibility 0.4s ease-in-out;
-  -webkit-transition: opacity 0.4s ease-in-out, -webkit-transform 0.4s ease-in-out, visibility 0.4s ease-in-out;
-  will-change: opacity, transform;
+  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);
-  visibility: visible;
-  height: auto;
-  /* 固定高度，避免iOS上的布局抖动 */
-  min-height: 160rpx;
 }
 
 /* 顶部搜索区域完全隐藏状态 - 用于平滑收缩高度 */
 .top-hidden {
-  opacity: 0;
-  transform: translateY(-100%);
-  -webkit-transform: translateY(-100%);
+  max-height: 0;
+  padding: 0;
+  margin-bottom: 0;
   pointer-events: none;
-  visibility: hidden;
-  /* 保持高度不变，避免iOS上的布局抖动 */
-  height: auto;
-  min-height: 160rpx;
-  padding: 10rpx 0;
-  margin-bottom: 20rpx;
+  opacity: 0;
+  transform: translateY(-20rpx);
+  -webkit-transform: translateY(-20rpx);
 }
 
 /* 标题样式 */