实现搜索框下滑隐藏上滑展示，选择时固定展示功能

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,21 +866,26 @@ Page({
   // 滚动事件处理
   onScroll: function(e) {
     const { scrollTop } = e.detail;
+    const lastScrollTop = this.data.lastScrollTop;
     
     // 只控制搜索区域的完全显示/隐藏状态，使用CSS类统一控制过渡效果
-    // 简化逻辑，避免iOS上的兼容性问题
-    let isSearchBarFullyHidden = false;
+    let isSearchBarFullyHidden = this.data.isSearchBarFullyHidden;
     
-    // 增加iOS兼容性处理，使用更简单的触发逻辑
+    // 如果搜索框被选中，则不隐藏
+    if (!this.data.isSearchBarFocused) {
+      // 判断滚动方向
+      if (scrollTop > lastScrollTop) {
+        // 向下滚动，隐藏搜索框
         if (scrollTop > 150) {
-      // 当滚动距离超过150rpx时，完全隐藏搜索区域
           isSearchBarFullyHidden = true;
         }
-    
-    // 当滚动回到顶部时，显示搜索区域
+      } else {
+        // 向上滚动，显示搜索框
         if (scrollTop <= 100) {
           isSearchBarFullyHidden = false;
         }
+      }
+    }
     
     // 更新搜索框状态
     this.setData({

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>

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);
 }
 
 /* 标题样式 */