修复iOS系统搜索框隐藏时页面强行下滑和过渡动画不兼容问题

2 months ago · a2f34b3914
3 changed files with 163 additions and 78 deletions
--- a/pages/index/index.js
+++ b/pages/index/index.js
@ -26,7 +26,6 @@ Page({
    lastScrollTop: 0,
    isScrollLocked: false,
    isSearchBarFullyHidden: false,
-    isSearchBarFocused: false,
    
    // 回到顶部按钮
    showBackToTop: false,
@ -192,11 +191,23 @@ Page({

  onLoad() {
    console.log('首页初始化')
-    const savedBtnTop = wx.getStorageSync('sidebarBtnTop');
-    const savedBtnHidden = wx.getStorageSync('sidebarBtnHidden');
+    
+    // 获取系统信息，处理iOS特定兼容性
    const systemInfo = wx.getSystemInfoSync();
+    const isIOS = systemInfo.system.toLowerCase().includes('ios');
    const screenHeight = systemInfo.screenHeight * 2;
    
+    // 设置iOS特定标志
+    if (isIOS) {
+      this.setData({
+        isIOS: true
+      });
+      console.log('iOS设备检测到，启用兼容模式');
+    }
+    
+    const savedBtnTop = wx.getStorageSync('sidebarBtnTop');
+    const savedBtnHidden = wx.getStorageSync('sidebarBtnHidden');
+    
    let defaultTop = screenHeight * 0.5;
    if (savedBtnTop !== '' && savedBtnTop !== -100) {
      const minTop = screenHeight * 0.2;
@ -212,6 +223,19 @@ Page({
    });
    this.checkAndRestoreLoginStatus()
    this.loadGoods()
+    
+    // 计算搜索区域高度
+    const query = wx.createSelectorQuery();
+    query.select('.top-section-container').boundingClientRect();
+    query.exec((res) => {
+      if (res[0]) {
+        const searchHeight = res[0].height;
+        this.setData({
+          searchSectionHeight: searchHeight
+        });
+        console.log('搜索区域高度:', searchHeight);
+      }
+    });
  },

  onShow: function () {
@ -689,23 +713,6 @@ Page({
    })
  },
  
-  // 搜索框获得焦点
-  onSearchFocus: function() {
-    // 当搜索框获得焦点时，固定显示搜索框，不隐藏
-    this.setData({
-      isSearchBarFocused: true,
-      isSearchBarFullyHidden: false
-    })
-  },
-  
-  // 搜索框失去焦点
-  onSearchBlur: function() {
-    // 当搜索框失去焦点时，恢复正常的隐藏逻辑
-    this.setData({
-      isSearchBarFocused: false
-    })
-  },
-  
  // 切换地区选择器
  toggleRegionPicker: function() {
    this.setData({
@ -863,52 +870,37 @@ Page({
    });
  },
  
-  // 滚动事件处理
+  // 滚动事件处理 - 简化版本 
  onScroll: function(e) {
    const { scrollTop } = e.detail;
-    const lastScrollTop = this.data.lastScrollTop;
-    
-    // 只控制搜索区域的完全显示/隐藏状态，使用CSS类统一控制过渡效果
-    let isSearchBarFullyHidden = this.data.isSearchBarFullyHidden;
-    
-    // 如果搜索框被选中，则不隐藏
-    if (!this.data.isSearchBarFocused) {
-      // 判断滚动方向
-      if (scrollTop > lastScrollTop) {
-        // 向下滚动，隐藏搜索框
-        if (scrollTop > 150) {
-          isSearchBarFullyHidden = true;
-        }
-      } else {
-        // 向上滚动，显示搜索框
-        if (scrollTop <= 100) {
-          isSearchBarFullyHidden = false;
-        }
-      }
-    }
    
-    // 更新搜索框状态
-    this.setData({
-      isSearchBarFullyHidden: isSearchBarFullyHidden,
-      lastScrollTop: scrollTop
-    });
+    // 使用简单的阈值判断 
+    const shouldHide = scrollTop > 100;
+    
+    // 只有当状态需要改变时才更新 
+    if (shouldHide !== this.data.isSearchBarFullyHidden) {
+      this.setData({
+        isSearchBarFullyHidden: shouldHide,
+        lastScrollTop: scrollTop
+      });
+    } else {
+      // 只更新滚动位置 
+      this.setData({
+        lastScrollTop: scrollTop
+      });
+    }
    
-    // 回到顶部按钮显示逻辑
+    // 回到顶部按钮显示逻辑 
    if (scrollTop > 300 && !this.data.showBackToTop) {
      this.setData({ showBackToTop: true });
    } else if (scrollTop <= 300 && this.data.showBackToTop) {
      this.setData({ showBackToTop: false });
    }
    
-    const { scrollHeight, clientHeight } = e.detail;
-    const distanceToBottom = scrollHeight - scrollTop - clientHeight;
-    
-    const app = getApp();
-    if (!app || !app.globalData) {
-      return;
+    const app = getApp(); 
+    if (app && app.globalData) {
+      app.globalData.showTabBar = true;
    }
-    
-    app.globalData.showTabBar = true;
  },
  
  // 回到顶部
--- a/pages/index/index.wxml
+++ b/pages/index/index.wxml
@ -1,7 +1,7 @@
 <view class="container">
  <!-- 顶部搜索区域容器 -->
  <view 
-    class="top-section {{isSearchBarFullyHidden ? 'top-hidden' : ''}}"
+    class="top-section-container {{isSearchBarFullyHidden ? 'top-hidden' : ''}}"
  >
    <!-- 标题 -->
    <view class="title">专业的鸡蛋交易平台</view>
@ -23,8 +23,6 @@
            placeholder-class="search-placeholder"
            value="{{searchKeyword}}"
            bindinput="onSearchInput"
-            bindfocus="onSearchFocus"
-            bindblur="onSearchBlur"
          />
        </view>
        <button class="search-button" bindtap="searchGoods">搜索</button>
--- a/pages/index/index.wxss
+++ b/pages/index/index.wxss
@ -16,33 +16,128 @@ page {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
-  background-color: #f8f8f8;
+  /* 移除背景色，让page的背景渐变显示出来 */
 }

-/* 顶部搜索区域容器 */
-.top-section {
-  flex-shrink: 0;
-  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;
-  opacity: 1;
+/* 顶部搜索区域容器 - 保持紫色渐变背景 */
+.top-section-container {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 1000;
+  background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
+  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transform: translateY(0);
-  -webkit-transform: translateY(0);
+  will-change: transform;
+  -webkit-transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+}
+
+/* 隐藏时的状态 */
+.top-section-container.top-hidden {
+  transform: translateY(-100%);
+  opacity: 0;
+}
+
+/* 标题样式调整 */
+.top-section-container .title {
+  padding: 30rpx 0 20rpx 0;
+  font-size: 36rpx;
+  font-weight: bold;
+  text-align: center;
+  color: white;
+  transition: all 0.3s ease;
 }

-/* 顶部搜索区域完全隐藏状态 - 用于平滑收缩高度 */
-.top-hidden {
-  max-height: 0;
+.top-section-container.top-hidden .title {
  padding: 0;
-  margin-bottom: 0;
-  pointer-events: none;
+  font-size: 0;
+  opacity: 0;
+}
+
+/* 搜索区域样式调整 */
+.top-section-container .search-section {
+  padding: 0 30rpx 30rpx;
+  transition: all 0.3s ease;
+}
+
+.top-section-container.top-hidden .search-section {
+  padding: 0 30rpx;
+  opacity: 0;
+}
+
+/* 搜索框样式 */
+.top-section-container .search-bar {
+  display: flex;
+  align-items: center;
+  background: white;
+  border-radius: 50rpx;
+  padding: 10rpx 20rpx;
+  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
+  transition: all 0.3s ease;
+}
+
+.top-section-container.top-hidden .search-bar {
+  transform: scale(0.9);
  opacity: 0;
-  transform: translateY(-20rpx);
-  -webkit-transform: translateY(-20rpx);
+}
+
+/* 商品列表区域 - 调整位置 */
+.goods-section {
+  margin-top: 240rpx; /* 给搜索区域留出空间 */
+  height: calc(100vh - 240rpx);
+  background: transparent; /* 透明背景，显示page的渐变 */
+}
+
+/* 当搜索框隐藏时调整内边距 */
+.top-section-container.top-hidden ~ .goods-section {
+  margin-top: 100rpx;
+  height: calc(100vh - 100rpx);
+}
+
+/* 品种筛选区域调整 */
+.category-section {
+  position: fixed;
+  top: 200rpx; /* 根据搜索区域高度调整 */
+  left: 0;
+  right: 0;
+  z-index: 999;
+  background: white;
+  transition: top 0.3s ease;
+  padding: 20rpx 0;
+  border-bottom: 2rpx solid #f0f0f0;
+}
+
+.top-section-container.top-hidden ~ .category-section {
+  top: 60rpx; /* 搜索区域隐藏后上移 */
+}
+
+/* iOS专用修复 */
+@media screen and (-webkit-min-device-pixel-ratio:0) {
+  .top-section-container {
+    -webkit-transform: translateZ(0);
+    transform: translateZ(0);
+  }
+  
+  .top-section-container.top-hidden {
+    -webkit-transform: translate3d(0, -100%, 0);
+    transform: translate3d(0, -100%, 0);
+  }
+  
+  /* 防止iOS弹性滚动导致的视觉问题 */
+  .goods-list {
+    -webkit-overflow-scrolling: touch;
+  }
+}
+
+/* 确保滚动视图有正确的容器高度 */
+.goods-section {
+  position: relative;
+}
+
+.goods-list {
+  height: 100%;
+  box-sizing: border-box;
 }

 /* 标题样式 */