修复搜索框隐藏问题，优化品种选择框样式，调整商品列表布局

pages/index/index.js

@@ -225,17 +225,26 @@ Page({
     this.loadGoods()
     
     // 计算搜索区域高度
+    setTimeout(() => {
       const query = wx.createSelectorQuery();
       query.select('.top-section-container').boundingClientRect();
+      query.select('.category-section').boundingClientRect();
       query.exec((res) => {
-      if (res[0]) {
+        if (res[0] && res[1]) {
           const searchHeight = res[0].height;
+          const categoryHeight = res[1].height;
+          const totalHeight = searchHeight + categoryHeight;
+          
           this.setData({
-          searchSectionHeight: searchHeight
+            searchSectionHeight: searchHeight,
+            categorySectionHeight: categoryHeight,
+            totalHeaderHeight: totalHeight
           });
-        console.log('搜索区域高度:', searchHeight);
+          
+          console.log('搜索区域高度:', searchHeight, '分类区域高度:', categoryHeight, '总高度:', totalHeight);
         }
       });
+    }, 500);
   },
 
   onShow: function () {
@@ -395,9 +404,29 @@ Page({
     
     newGoods = newGoods.filter(item => (item.status || '').toLowerCase() !== 'hidden')
     
-    // 刷新和首次加载都插入广告
+    // 只在第一页或刷新时在商品列表最前面插入广告
     if ((!isLoadMore || this.data.page === 1) && newGoods.length > 0) {
-      newGoods = this.insertAdSlots(newGoods)
+      // 确保广告位在最前面
+      const adSlots = [
+        {
+          id: 'ad_slot_1',
+          name: '广告位1',
+          imageUrls: ['/images/轮播图1.jpg'],
+          price: 0,
+          adType: 'full_card',
+          isAd: true
+        },
+        {
+          id: 'ad_slot_2',
+          name: '广告位2',
+          imageUrls: ['/images/轮播图1.jpg'],
+          price: 0,
+          adType: 'half_image',
+          isAd: true
+        }
+      ];
+      
+      newGoods = [...adSlots, ...newGoods];
     }
     
     let updatedGoods = []
@@ -874,8 +903,8 @@ Page({
   onScroll: function(e) {
     const { scrollTop } = e.detail;
     
-    // 使用更平滑的阈值判断，避免iOS上的抖动
+    // 使用更平滑的阈值判断
-    const threshold = 100;
+    const threshold = 50; // 降低阈值，让隐藏更早触发
     
     // 检查滚动方向
     const scrollingDown = scrollTop > this.data.lastScrollTop;

pages/index/index.wxml

@@ -180,10 +180,9 @@
       refresher-enabled="{{true}}"
       refresher-triggered="{{isRefreshing}}"
       refresher-default-style="black"
-      refresher-background="#f8f8f8"
+      refresher-background="transparent"
       bindrefresherrefresh="onPullDownRefresh"
       bindrefresherrestore="onRestore"
-      style="height: calc(100% - 60rpx);"
     >
       <view class="goods-list-container">
         <!-- 瀑布流布局 -->

pages/index/index.wxss

@@ -1,4 +1,5 @@
 /**index.wxss**/
+/* 修复页面整体布局 */
 page {
   height: 100vh;
   display: flex;
@@ -16,7 +17,7 @@ page {
   display: flex;
   flex-direction: column;
   box-sizing: border-box;
-  background-color: #f8f8f8;
+  background: linear-gradient(180deg, #f8f8f8 0%, #f0f0f0 50%, #e8e8e8 100%);
 }
 
 /* 为整个容器添加修复 */
@@ -26,11 +27,35 @@ page {
   left: 0;
   right: 0;
   z-index: 1000;
-  background: transparent; /* 透明背景，与页面背景保持一致 */
+  background: linear-gradient(180deg, #f8f8f8 0%, #f0f0f0 50%, #e8e8e8 100%);
   transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
   transform: translateY(0);
-  will-change: transform; /* iOS性能优化 */
+  will-change: transform;
-  -webkit-transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94); /* iOS兼容 */
+  -webkit-transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+  padding: 10rpx 0; /* 减少内边距 */
+  min-height: 120rpx; /* 降低最小高度 */
+}
+
+/* 确保所有主要区域背景一致 */
+.top-section-container,
+.category-section,
+.goods-section,
+.goods-list {
+  background: linear-gradient(180deg, #f8f8f8 0%, #f0f0f0 50%, #e8e8e8 100%);
+}
+
+/* 修复商品列表区域 */
+.goods-section {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  position: relative;
+  padding-top: 0; /* 移除顶部内边距，让瀑布流自然显示 */
+  margin: 0;
+  border-radius: 0;
+  box-shadow: none;
+  background: transparent;
 }
 
 /* 隐藏时的状态 */
@@ -41,12 +66,13 @@ page {
 
 /* 标题样式调整 */
 .top-section-container .title {
-  padding: 30rpx 0 20rpx 0;
+  padding: 10rpx 0;
-  font-size: 36rpx;
+  font-size: 28rpx;
   font-weight: bold;
   text-align: center;
-  color: white;
+  color: #333;
   transition: all 0.3s ease;
+  margin: 0;
 }
 
 .top-section-container.top-hidden .title {
@@ -57,7 +83,7 @@ page {
 
 /* 搜索区域样式调整 */
 .top-section-container .search-section {
-  padding: 0 30rpx 30rpx;
+  padding: 0 30rpx 15rpx;
   transition: all 0.3s ease;
 }
 
@@ -72,9 +98,10 @@ page {
   align-items: center;
   background: white;
   border-radius: 50rpx;
-  padding: 10rpx 20rpx;
+  padding: 5rpx 15rpx;
   box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
   transition: all 0.3s ease;
+  min-height: 60rpx;
 }
 
 .top-section-container.top-hidden .search-bar {
@@ -82,38 +109,43 @@ page {
   opacity: 0;
 }
 
-/* 商品列表添加顶部内边距 */
+/* 修复商品列表区域 */
 .goods-list {
-  padding-top: 260rpx; /* 增加内边距，确保商品不被筛选区域遮挡 */
+  flex: 1;
-  transition: padding-top 0.3s ease;
+  padding-top: 240rpx; /* 根据新的分类区域位置调整，确保不被覆盖 */
-  min-height: calc(100vh - 260rpx); /* 最小高度，确保占满屏幕 */
+  height: 100%;
+  min-height: 100vh;
+  box-sizing: border-box;
+  overflow-y: auto;
+  -webkit-overflow-scrolling: touch;
+  background: transparent;
 }
 
-/* 当搜索框隐藏时调整内边距 */
+/* 当搜索框隐藏时调整商品列表位置 */
-.top-section-container.top-hidden ~ .goods-list {
+.top-section-container.top-hidden ~ .goods-section .goods-list {
-  padding-top: 0; /* 完全移除内边距，让商品列表紧贴筛选区域 */
+  padding-top: 80rpx; /* 搜索框隐藏时减少顶部间距 */
-  min-height: calc(100vh - 0rpx); /* 调整最小高度 */
 }
 
 /* 品种筛选区域调整 */
 .category-section {
   position: fixed;
-  top: 180rpx; /* 根据搜索区域高度调整 */
+  top: 160rpx; /* 进一步增大top值，确保完全不被搜索框覆盖 */
   left: 0;
   right: 0;
   z-index: 999;
-  background: white;
+  background: linear-gradient(180deg, #f8f8f8 0%, #f0f0f0 50%, #e8e8e8 100%);
   transition: top 0.3s ease;
-  padding: 16rpx 0;
+  padding: 10rpx 0;
-  border-bottom: 2rpx solid #f0f0f0;
+  height: 70rpx;
-  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1); /* 添加阴影，与搜索框风格一致 */
-  height: 80rpx; /* 固定高度，避免内容变化导致跳动 */
   box-sizing: border-box;
+  border-bottom: 2rpx solid #f0f0f0;
+  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
+  margin: 0;
 }
 
+/* 搜索框隐藏时，分类区域上移 */
 .top-section-container.top-hidden ~ .category-section {
-  top: 0; /* 搜索区域隐藏后直接固定在顶部 */
+  top: 0;
-  position: fixed; /* 保持固定定位，确保始终在顶部 */
 }
 
 /* iOS专用修复 */
@@ -199,8 +231,8 @@ page {
 
 .search-input {
   flex: 1;
-  height: 70rpx;
+  height: 50rpx;
-  font-size: 28rpx;
+  font-size: 26rpx;
   color: #333;
   border: none;
   outline: none;
@@ -215,12 +247,11 @@ page {
   display: flex;
   align-items: center;
   gap: 5rpx;
-  font-size: 26rpx;
+  font-size: 24rpx;
   font-weight: 500;
-  color: #333;
-  padding: 15rpx 20rpx;
-  background: linear-gradient(135deg, #1677ff 0%, #4096ff 100%);
   color: white;
+  padding: 10rpx 15rpx;
+  background: linear-gradient(135deg, #1677ff 0%, #4096ff 100%);
   border-radius: 40rpx;
   box-shadow: 0 2rpx 8rpx rgba(22, 119, 255, 0.3);
   transition: all 0.3s ease;
@@ -323,28 +354,30 @@ wx-button:not([size=mini]) {
 /* 品种筛选区域样式 */
 .category-section {
   width: 100%;
-  margin: 0 20rpx 20rpx 20rpx;
+  margin: 0 0 20rpx 0;
   flex: 0 1 auto;
   box-sizing: border-box;
 }
 
 .category-scroll {
   display: flex;
-  gap: 16rpx;
+  gap: 12rpx; /* 减少间距 */
-  padding: 12rpx 16rpx;
+  padding: 8rpx 20rpx; /* 调整内边距 */
   white-space: nowrap;
   overflow-x: auto;
   background: rgba(255, 255, 255, 0.5);
   backdrop-filter: blur(10rpx);
   -webkit-backdrop-filter: blur(10rpx);
-  border-radius: 40rpx;
+  border-radius: 0;
   box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
   border: 1rpx solid rgba(255, 255, 255, 0.5);
+  justify-content: center;
+  align-items: center;
 }
 
 .egg-item {
   position: relative;
-  padding: 16rpx 28rpx;
+  padding: 12rpx 20rpx;
   background: rgba(255, 255, 255, 0.7);
   backdrop-filter: blur(8rpx);
   -webkit-backdrop-filter: blur(8rpx);
@@ -367,7 +400,7 @@ wx-button:not([size=mini]) {
 }
 
 .egg-inner {
-  font-size: 26rpx;
+  font-size: 24rpx;
   color: #555;
   font-weight: 600;
   text-align: center;
@@ -1165,8 +1198,10 @@ wx-button:not([size=mini]) {
 /* 瀑布流容器 */
 .waterfall-container {
   display: flex;
-  gap: 16rpx;
+  gap: 32rpx;
   width: 100%;
+  margin-top: 20rpx; /* 增加上边距，避免被分类区域遮挡 */
+  background: transparent;
 }
 
 /* 瀑布流列 */
@@ -1410,28 +1445,30 @@ wx-button:not([size=mini]) {
   overflow: hidden;
   background: #fff;
   box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
+  margin-bottom: 16rpx; /* 确保有下边距 */
+  z-index: 1; /* 设置z-index确保在最上层 */
 }
 
 /* 完整卡片广告 */
 .ad-full-card {
   width: 100%;
-  height: 400rpx;
+  height: 350rpx; /* 稍微降低高度，避免被遮挡 */
 }
 
 .ad-image {
   width: 100%;
-  height: 400rpx;
+  height: 350rpx; /* 相应调整 */
 }
 
 /* 半高图片广告 */
 .ad-half-image {
   width: 100%;
-  height: 200rpx;
+  height: 180rpx; /* 稍微降低高度 */
 }
 
 .ad-image-half {
   width: 100%;
-  height: 200rpx;
+  height: 180rpx; /* 相应调整 */
 }
 
 /* 广告标签 */