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

pages/index/index.js

@@ -870,37 +870,51 @@ Page({
     });
   },
   
-  // 滚动事件处理 - 简化版本 
+  // 滚动事件处理 - 简化并修复iOS兼容性问题
   onScroll: function(e) {
     const { scrollTop } = e.detail;
     
-    // 使用简单的阈值判断 
-    const shouldHide = scrollTop > 100;
+    // 使用更平滑的阈值判断，避免iOS上的抖动
+    const threshold = 100;
     
-    // 只有当状态需要改变时才更新 
-    if (shouldHide !== this.data.isSearchBarFullyHidden) {
+    // 检查滚动方向
+    const scrollingDown = scrollTop > this.data.lastScrollTop;
+    const scrollingUp = scrollTop < this.data.lastScrollTop;
+    
+    // 只在滚动超过阈值且方向改变时才更新状态
+    if (scrollingDown && scrollTop > threshold && !this.data.isSearchBarFullyHidden) {
+      this.setData({
+        isSearchBarFullyHidden: true,
+        lastScrollTop: scrollTop
+      });
+    } else if (scrollingUp && scrollTop <= threshold && this.data.isSearchBarFullyHidden) {
       this.setData({
-        isSearchBarFullyHidden: shouldHide,
+        isSearchBarFullyHidden: false,
         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 app = getApp(); 
-    if (app && app.globalData) {
-      app.globalData.showTabBar = true;
+    const { scrollHeight, clientHeight } = e.detail;
+    const distanceToBottom = scrollHeight - scrollTop - clientHeight;
+    
+    const app = getApp();
+    if (!app || !app.globalData) {
+      return;
     }
+    
+    app.globalData.showTabBar = true;
   },
   
   // 回到顶部

pages/index/index.wxss

@@ -16,10 +16,10 @@ page {
   display: flex;
   flex-direction: column;
   box-sizing: border-box;
-  /* 移除背景色，让page的背景渐变显示出来 */
+  background-color: #f8f8f8;
 }
 
-/* 顶部搜索区域容器 - 保持紫色渐变背景 */
+/* 为整个容器添加修复 */
 .top-section-container {
   position: fixed;
   top: 0;
@@ -29,8 +29,8 @@ page {
   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);
-  will-change: transform;
-  -webkit-transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+  will-change: transform; /* iOS性能优化 */
+  -webkit-transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94); /* iOS兼容 */
 }
 
 /* 隐藏时的状态 */
@@ -82,17 +82,15 @@ page {
   opacity: 0;
 }
 
-/* 商品列表区域 - 调整位置 */
-.goods-section {
-  margin-top: 240rpx; /* 给搜索区域留出空间 */
-  height: calc(100vh - 240rpx);
-  background: transparent; /* 透明背景，显示page的渐变 */
+/* 商品列表添加顶部内边距 */
+.goods-list {
+  padding-top: 240rpx; /* 与搜索区域高度匹配 */
+  transition: padding-top 0.3s ease;
 }
 
 /* 当搜索框隐藏时调整内边距 */
-.top-section-container.top-hidden ~ .goods-section {
-  margin-top: 100rpx;
-  height: calc(100vh - 100rpx);
+.top-section-container.top-hidden ~ .goods-list {
+  padding-top: 100rpx; /* 减少内边距 */
 }
 
 /* 品种筛选区域调整 */
@@ -132,6 +130,7 @@ page {
 
 /* 确保滚动视图有正确的容器高度 */
 .goods-section {
+  height: 100vh;
   position: relative;
 }