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

2 months ago · 25c0ec997f
3 changed files with 124 additions and 59 deletions
--- a/pages/index/index.js
+++ b/pages/index/index.js
@ -225,17 +225,26 @@ Page({
    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);
-      }
-    });
+    setTimeout(() => {
+      const query = wx.createSelectorQuery();
+      query.select('.top-section-container').boundingClientRect();
+      query.select('.category-section').boundingClientRect();
+      query.exec((res) => {
+        if (res[0] && res[1]) {
+          const searchHeight = res[0].height;
+          const categoryHeight = res[1].height;
+          const totalHeight = searchHeight + categoryHeight;
+          
+          this.setData({
+            searchSectionHeight: searchHeight,
+            categorySectionHeight: categoryHeight,
+            totalHeaderHeight: totalHeight
+          });
+          
+          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;
--- a/pages/index/index.wxml
+++ b/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">
        <!-- 瀑布流布局 -->
--- a/pages/index/index.wxss
+++ b/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性能优化 */
-  -webkit-transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94); /* iOS兼容 */
+  will-change: transform;
+  -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;
-  font-size: 36rpx;
+  padding: 10rpx 0;
+  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; /* 增加内边距，确保商品不被筛选区域遮挡 */
-  transition: padding-top 0.3s ease;
-  min-height: calc(100vh - 260rpx); /* 最小高度，确保占满屏幕 */
+  flex: 1;
+  padding-top: 240rpx; /* 根据新的分类区域位置调整，确保不被覆盖 */
+  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 {
-  padding-top: 0; /* 完全移除内边距，让商品列表紧贴筛选区域 */
-  min-height: calc(100vh - 0rpx); /* 调整最小高度 */
+/* 当搜索框隐藏时调整商品列表位置 */
+.top-section-container.top-hidden ~ .goods-section .goods-list {
+  padding-top: 80rpx; /* 搜索框隐藏时减少顶部间距 */
 }

 /* 品种筛选区域调整 */
 .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;
-  border-bottom: 2rpx solid #f0f0f0;
-  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1); /* 添加阴影，与搜索框风格一致 */
-  height: 80rpx; /* 固定高度，避免内容变化导致跳动 */
+  padding: 10rpx 0;
+  height: 70rpx;
  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; /* 搜索区域隐藏后直接固定在顶部 */
-  position: fixed; /* 保持固定定位，确保始终在顶部 */
+  top: 0;
 }

 /* iOS专用修复 */
@ -199,8 +231,8 @@ page {

 .search-input {
  flex: 1;
-  height: 70rpx;
-  font-size: 28rpx;
+  height: 50rpx;
+  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;
-  padding: 12rpx 16rpx;
+  gap: 12rpx; /* 减少间距 */
+  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; /* 相应调整 */
 }

 /* 广告标签 */