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;
}