实现首页下滑隐藏、上滑恢复动画效果

pages/index/index.js

@@ -99,6 +99,16 @@ Page({
     showBackToTop: false,
     scrollTop: 0,
     
+    // 广告轮播图和功能按钮的显示状态
+    headerElementsHidden: false,
+    headerTranslateY: 0,
+    headerOpacity: 1,
+    
+    // 滚动相关
+    lastScrollTop: 0,
+    scrollDirection: '',
+    scrollThreshold: 20,
+
     // 搜索相关
     searchKeyword: '',
     selectedRegion: '全国',
@@ -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';
+        }
+      }
+    });
+
     // 搜索框始终固定显示，不做隐藏处理
 
     // 侧边栏按钮显示逻辑

pages/index/index.wxml

@@ -3,7 +3,7 @@
   <view class="top-section-container">
     
     <!-- 广告走马灯轮播图 -->
-    <view class="ad-carousel">
+    <view class="ad-carousel" style="transform: translateY({{headerElementsHidden ? '-100%' : '0'}}); opacity: {{headerElementsHidden ? '0' : '1'}}; transition: transform 0.3s ease, opacity 0.3s ease;">
       <swiper 
         class="ad-swiper" 
         indicator-dots="{{true}}" 
@@ -27,6 +27,19 @@
       </swiper>
     </view>
     
+    <!-- 功能按钮区域 -->
+    <view class="function-buttons" style="transform: translateY({{headerElementsHidden ? '-100%' : '0'}}); opacity: {{headerElementsHidden ? '0' : '1'}}; transition: transform 0.3s ease, opacity 0.3s ease;">
+      <view class="function-btn" bindtap="navigateToSettlement">
+        <text class="function-btn-text">入驻</text>
+      </view>
+      <view class="function-btn" bindtap="navigateToCooperation">
+        <text class="function-btn-text">招商</text>
+      </view>
+      <view class="function-btn" bindtap="navigateToGoods">
+        <text class="function-btn-text">管理</text>
+      </view>
+    </view>
+    
     <!-- 搜索区域 -->
     <view class="search-section">
       <view class="search-bar" style="width: 693rpx; display: flex; box-sizing: border-box">
@@ -112,23 +125,6 @@
   >
     <text class="back-to-top-text">top</text>
   </view>
-  <view wx:if="{{showSidebar}}" class="sidebar">
-    <view class="sidebar-title">招商合作</view>
-    <view class="sidebar-menu">
-      <view class="sidebar-item" bindtap="navigateToSettlement">
-        <text class="sidebar-item-icon">🏠</text>
-        <text class="sidebar-item-text">我要卖蛋</text>
-      </view>
-      <view class="sidebar-item" bindtap="navigateToCooperation">
-        <text class="sidebar-item-icon">📢</text>
-        <text class="sidebar-item-text">招商合作</text>
-      </view>
-      <view wx:if="{{hasGoodsManagePermission}}" class="sidebar-item" bindtap="navigateToGoods">
-        <text class="sidebar-item-icon">📦</text>
-        <text class="sidebar-item-text">货源管理</text>
-      </view>
-      </view>
-  </view>
   
   <!-- 高级筛选底部弹出层 -->
   <view wx:if="{{showAdvancedFilter}}" class="sidebar bottom-popup advanced-filter-sidebar">

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;
 }
 
 /* 品种筛选区域调整 - 确保在商品图层之上，搜索框之下 */