From 6fd69985dc8448a33eef15f12baf899938bc0bbc Mon Sep 17 00:00:00 2001 From: Default User Date: Sat, 17 Jan 2026 15:46:56 +0800 Subject: [PATCH] =?UTF-8?q?=E5=AE=9E=E7=8E=B0=E9=A6=96=E9=A1=B5=E4=B8=8B?= =?UTF-8?q?=E6=BB=91=E9=9A=90=E8=97=8F=E3=80=81=E4=B8=8A=E6=BB=91=E6=81=A2?= =?UTF-8?q?=E5=A4=8D=E5=8A=A8=E7=94=BB=E6=95=88=E6=9E=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- pages/index/index.js | 55 +++++++++++++++++++++++++++++++++++++++++- pages/index/index.wxml | 32 +++++++++++------------- pages/index/index.wxss | 51 ++++++++++++++++++++++++++++++++++++--- 3 files changed, 116 insertions(+), 22 deletions(-) diff --git a/pages/index/index.js b/pages/index/index.js index 89bb566..8b62274 100644 --- a/pages/index/index.js +++ b/pages/index/index.js @@ -98,6 +98,16 @@ Page({ // 回到顶部按钮 showBackToTop: false, scrollTop: 0, + + // 广告轮播图和功能按钮的显示状态 + headerElementsHidden: false, + headerTranslateY: 0, + headerOpacity: 1, + + // 滚动相关 + lastScrollTop: 0, + scrollDirection: '', + scrollThreshold: 20, // 搜索相关 searchKeyword: '', @@ -541,7 +551,8 @@ Page({ sidebarBtnTop: defaultTop, sidebarBtnHidden: false, isSearchBarFullyHidden: false, - lastScrollTop: 0 + lastScrollTop: 0, + headerElementsHidden: false }); this.checkAndRestoreLoginStatus() this.loadCategories() @@ -2342,15 +2353,57 @@ Page({ handleScroll: function (scrollTop) { const threshold = 50; const backToTopThreshold = 300; + const headerHideThreshold = 20; const lastScrollTop = this.data.lastScrollTop || 0; const isScrollingDown = scrollTop > lastScrollTop; + const scrollDelta = Math.abs(scrollTop - lastScrollTop); let needUpdate = false; const updates = { lastScrollTop: scrollTop }; + // 广告轮播图和功能按钮的显示/隐藏逻辑 + if (scrollDelta > this.data.scrollThreshold) { + if (isScrollingDown && scrollTop > headerHideThreshold) { + // 下滑时隐藏广告轮播图和功能按钮 + updates.headerElementsHidden = true; + needUpdate = true; + } else if (!isScrollingDown) { + // 上滑时显示广告轮播图和功能按钮 + updates.headerElementsHidden = false; + needUpdate = true; + } + } + + // 动态调整top-section-container的高度和商品列表的位置,确保布局正确 + const query = wx.createSelectorQuery().in(this); + query.select('.top-section-container').node(); + query.select('.goods-list').node(); + query.select('.goods-section').node(); + query.exec((res) => { + if (res && res[0] && res[0].node && res[1] && res[1].node && res[2] && res[2].node) { + const containerNode = res[0].node; + const goodsNode = res[1].node; + const goodsSectionNode = res[2].node; + + if (this.data.headerElementsHidden) { + // 隐藏时调整容器高度和商品列表位置,精确计算高度 + containerNode.style.height = '175rpx'; + containerNode.style.minHeight = '175rpx'; + goodsNode.style.paddingTop = '0'; + goodsSectionNode.style.marginTop = '175rpx'; + } else { + // 显示时恢复容器高度和商品列表位置 + containerNode.style.height = 'auto'; + containerNode.style.minHeight = '580rpx'; + goodsNode.style.paddingTop = '0'; + goodsSectionNode.style.marginTop = '580rpx'; + } + } + }); + // 搜索框始终固定显示,不做隐藏处理 // 侧边栏按钮显示逻辑 diff --git a/pages/index/index.wxml b/pages/index/index.wxml index bf29e90..1225e3c 100644 --- a/pages/index/index.wxml +++ b/pages/index/index.wxml @@ -3,7 +3,7 @@ - + + + + + 入驻 + + + 招商 + + + 管理 + + + @@ -112,23 +125,6 @@ > top - - 招商合作 - - - 🏠 - 我要卖蛋 - - - 📢 - 招商合作 - - - 📦 - 货源管理 - - - diff --git a/pages/index/index.wxss b/pages/index/index.wxss index 9ef5999..467c435 100644 --- a/pages/index/index.wxss +++ b/pages/index/index.wxss @@ -62,13 +62,15 @@ page { backdrop-filter: none; -webkit-backdrop-filter: none; padding: 0 0 10rpx; - min-height: 480rpx; + height: auto; + min-height: auto; box-shadow: none; border-bottom: none; display: flex; flex-direction: column; align-items: center; overflow: visible; + transition: height 0.3s ease; } /* 广告轮播图样式 */ @@ -96,6 +98,46 @@ page { background-color: #f5f5f5; } +/* 功能按钮样式 */ +.function-buttons { + display: flex; + justify-content: space-between; + align-items: center; + padding: 10rpx 30rpx; + width: 100%; + max-width: 850rpx; + box-sizing: border-box; + background: transparent; + margin: 0 auto; +} + +.function-btn { + flex: 1; + background: rgba(255, 255, 255, 0.9); + backdrop-filter: blur(10rpx); + -webkit-backdrop-filter: blur(10rpx); + border-radius: 22rpx; + padding: 12rpx 0; + margin: 0 8rpx; + text-align: center; + box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.08); + border: 1rpx solid rgba(255, 255, 255, 0.5); + transition: all 0.3s ease; + min-width: 100rpx; +} + +.function-btn:active { + transform: scale(0.95); + opacity: 0.8; +} + +.function-btn-text { + font-size: 24rpx; + color: #333; + font-weight: 600; + letter-spacing: 1rpx; +} + /* 确保所有主要区域背景一致 */ .top-section-container, .category-section, @@ -117,6 +159,8 @@ page { box-shadow: none; background: transparent; z-index: 1; + margin-top: 580rpx; + transition: margin-top 0.3s ease; } /* 标题样式调整 */ @@ -152,14 +196,15 @@ page { /* 修复商品列表区域 */ .goods-list { flex: 1; - padding-top: 500rpx; + padding-top: 580rpx; padding-bottom: 20rpx; height: auto; - min-height: calc(100vh - 520rpx); /* 确保有足够的最小高度 */ + min-height: calc(100vh - 600rpx); /* 确保有足够的最小高度 */ box-sizing: border-box; overflow-y: auto; -webkit-overflow-scrolling: touch; background: transparent; + transition: padding-top 0.3s ease; } /* 品种筛选区域调整 - 确保在商品图层之上,搜索框之下 */