From 249dc32e2690cbdaac5a112fdf8435728bd68d41 Mon Sep 17 00:00:00 2001 From: Trae AI Date: Sat, 27 Dec 2025 09:02:04 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E6=90=9C=E7=B4=A2=E6=A1=86?= =?UTF-8?q?=E6=BB=91=E5=8A=A8=E9=9A=90=E8=97=8F=E6=95=88=E6=9E=9C=EF=BC=8C?= =?UTF-8?q?=E5=AE=9E=E7=8E=B0=E6=B8=90=E8=BF=9B=E5=BC=8F=E9=9A=90=E8=97=8F?= =?UTF-8?q?=E5=92=8C=E9=AB=98=E5=BA=A6=E6=94=B6=E7=BC=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- pages/index/index.js | 76 ++++++++++++++++++++++++------------------ pages/index/index.wxml | 60 ++++++++++++++++++++------------- pages/index/index.wxss | 52 +++++++++++------------------ 3 files changed, 99 insertions(+), 89 deletions(-) diff --git a/pages/index/index.js b/pages/index/index.js index 92a8b84..7f5bf3a 100644 --- a/pages/index/index.js +++ b/pages/index/index.js @@ -25,6 +25,9 @@ Page({ searchSectionVisible: true, lastScrollTop: 0, isScrollLocked: false, + searchSectionOpacity: 1, + searchSectionTransform: 0, + isSearchBarFullyHidden: false, // 回到顶部按钮 showBackToTop: false, @@ -604,11 +607,13 @@ Page({ return { leftColumnGoods: leftColumn, rightColumnGoods: rightColumn } }, - // 搜索输入 + // 搜索输入（实时搜索） onSearchInput: function(e) { this.setData({ searchKeyword: e.detail.value }) + // 实时应用筛选条件 + this.searchGoods() }, // 搜索商品 @@ -637,22 +642,23 @@ Page({ }) }, - // 选择地区 + // 选择地区（实时更新） selectRegion: function(e) { const region = e.currentTarget.dataset.region - this.setData({ - selectedRegion: region - }) - }, - - // 确认地区选择 - confirmRegion: function() { + // 重新显示tabBar const app = getApp(); if (app && app.globalData) { app.globalData.showTabBar = true; } + // 应用筛选条件 + this.setData({ + selectedRegion: region, + showRegionPicker: false + }) + + // 重新筛选商品 const filteredGoods = this.applyFilters(this.data.goods) const groupedGoods = this.groupGoodsForStaggeredLayout(filteredGoods) const { leftColumnGoods, rightColumnGoods } = this.distributeToColumns(filteredGoods) @@ -660,8 +666,7 @@ Page({ filteredGoods: filteredGoods, groupedGoods: groupedGoods, leftColumnGoods: leftColumnGoods, - rightColumnGoods: rightColumnGoods, - showRegionPicker: false + rightColumnGoods: rightColumnGoods }) }, @@ -782,39 +787,44 @@ Page({ onScroll: function(e) { const { scrollTop } = e.detail; - if (this.data.isScrollLocked) { - this.setData({ lastScrollTop: scrollTop }); - return; - } - - const scrollDirection = scrollTop > this.data.lastScrollTop ? 'down' : 'up'; - const scrollDelta = Math.abs(scrollTop - this.data.lastScrollTop); + let searchSectionOpacity = 1; + let searchSectionTransform = 0; + let isSearchBarFullyHidden = false; - if (scrollDelta < 10) { - this.setData({ lastScrollTop: scrollTop }); - return; + if (scrollTop > 50) { + // 当滚动距离超过50rpx时，开始逐渐隐藏 + const hideProgress = Math.min((scrollTop - 50) / 100, 1); // 0-1的隐藏进度 + searchSectionOpacity = 1 - hideProgress; + searchSectionTransform = -20 * hideProgress; + + // 当隐藏进度达到100%时，完全隐藏并收缩高度 + if (hideProgress >= 1) { + isSearchBarFullyHidden = true; + } } - if (scrollDirection === 'down' && scrollTop > 100 && this.data.searchSectionVisible) { - this.setData({ searchSectionVisible: false, isScrollLocked: true }); - setTimeout(() => { - this.setData({ isScrollLocked: false }); - }, 300); - } else if (scrollDirection === 'up' && !this.data.searchSectionVisible && scrollTop < 50) { - this.setData({ searchSectionVisible: true, isScrollLocked: true }); - setTimeout(() => { - this.setData({ isScrollLocked: false }); - }, 300); + // 当滚动回到顶部时，重置所有状态 + if (scrollTop <= 50) { + searchSectionOpacity = 1; + searchSectionTransform = 0; + isSearchBarFullyHidden = false; } + // 更新搜索框状态和样式 + this.setData({ + searchSectionOpacity: searchSectionOpacity, + searchSectionTransform: searchSectionTransform, + isSearchBarFullyHidden: isSearchBarFullyHidden, + lastScrollTop: scrollTop + }); + + // 回到顶部按钮显示逻辑 if (scrollTop > 300 && !this.data.showBackToTop) { this.setData({ showBackToTop: true }); } else if (scrollTop <= 300 && this.data.showBackToTop) { this.setData({ showBackToTop: false }); } - this.setData({ lastScrollTop: scrollTop }); - const { scrollHeight, clientHeight } = e.detail; const distanceToBottom = scrollHeight - scrollTop - clientHeight; diff --git a/pages/index/index.wxml b/pages/index/index.wxml index a884bba..7b5b8f1 100644 --- a/pages/index/index.wxml +++ b/pages/index/index.wxml @@ -1,27 +1,33 @@ - - 专业的鸡蛋现货交易平台 - - - - - - - - {{selectedRegion || '全国'}} - ▼ + + + + 专业的鸡蛋现货交易平台 + + + + + + + + {{selectedRegion || '全国'}} + ▼ + + + 🔍 + - - 🔍 - + - @@ -40,7 +46,6 @@ {{item}} - @@ -195,6 +200,13 @@ + + + 🔍 + 暂无相关商品 + 试试调整搜索条件或地区筛选 + + @@ -260,7 +272,7 @@ wx:key="id" data-item="{{item}}" bindtap="viewGoodsDetail" - wx:if="{{!item.isAd}}" + wx:if="{{!item.isAd && filteredGoods.length > 0}}" > diff --git a/pages/index/index.wxss b/pages/index/index.wxss index 880bd07..bbbc8f6 100644 --- a/pages/index/index.wxss +++ b/pages/index/index.wxss @@ -19,50 +19,38 @@ page { background-color: #f8f8f8; } -/* 标题样式 */ -.title { - font-size: 36rpx; - font-weight: bold; - margin: 20rpx; - color: #333; - text-align: center; +/* 顶部搜索区域容器 */ +.top-section { flex-shrink: 0; - transition: all 0.3s ease; + padding: 10rpx 0; + margin-bottom: 20rpx; + overflow: hidden; + transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); + will-change: opacity, transform, padding, margin, max-height; } -.title-hidden { - opacity: 0; - transform: translateY(-20rpx); - height: 0; - margin: 0; +/* 顶部搜索区域完全隐藏状态 - 用于收缩高度 */ +.top-hidden { + max-height: 0; padding: 0; - overflow: hidden; + margin-bottom: 0; + pointer-events: none; } -/* 搜索区域样式 */ -.search-section { +/* 标题样式 */ +.title { + font-size: 36rpx; + font-weight: bold; + margin: 10rpx 20rpx; + color: #333; + text-align: center; flex-shrink: 0; - transition: all 0.3s ease; -} - -.search-visible { - opacity: 1; - transform: translateY(0); - height: auto; -} - -.search-hidden { - opacity: 0; - transform: translateY(-100%); - height: 0; - overflow: hidden; } /* 搜索区域样式 */ .search-section { width: 100%; - margin: 0 20rpx 20rpx 20rpx; - flex: 0 1 auto; + margin: 0 30rpx 0 10rpx; box-sizing: border-box; }