diff --git a/pages/index/index.js b/pages/index/index.js index 3ffbeb6..954f1c7 100644 --- 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; diff --git a/pages/index/index.wxml b/pages/index/index.wxml index b36a78b..5279f73 100644 --- 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);" > diff --git a/pages/index/index.wxss b/pages/index/index.wxss index f356f3e..1717416 100644 --- 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; /* 相应调整 */ } /* 广告标签 */