diff --git a/pages/index/index.js b/pages/index/index.js index ab9f26e..9be6c95 100644 --- a/pages/index/index.js +++ b/pages/index/index.js @@ -25,8 +25,6 @@ Page({ searchSectionVisible: true, lastScrollTop: 0, isScrollLocked: false, - searchSectionOpacity: 1, - searchSectionTransform: 0, isSearchBarFullyHidden: false, // 回到顶部按钮 @@ -826,33 +824,22 @@ Page({ onScroll: function(e) { const { scrollTop } = e.detail; - let searchSectionOpacity = 1; - let searchSectionTransform = 0; + // 只控制搜索区域的完全显示/隐藏状态,不再使用内联样式控制过渡 + // 所有过渡效果通过CSS类统一控制 let isSearchBarFullyHidden = false; - if (scrollTop > 50) { - // 当滚动距离超过50rpx时,开始逐渐隐藏 - const hideProgress = Math.min((scrollTop - 50) / 150, 1); // 0-1的隐藏进度,延长隐藏过程 - searchSectionOpacity = 1 - hideProgress; - searchSectionTransform = -20 * hideProgress; - - // 当隐藏进度达到100%时,完全隐藏并收缩高度 - if (hideProgress >= 1) { - isSearchBarFullyHidden = true; - } + if (scrollTop > 200) { + // 当滚动距离超过200rpx时,完全隐藏搜索区域 + isSearchBarFullyHidden = true; } - // 当滚动回到顶部时,重置所有状态 - if (scrollTop <= 50) { - searchSectionOpacity = 1; - searchSectionTransform = 0; + // 当滚动回到顶部时,显示搜索区域 + if (scrollTop <= 150) { isSearchBarFullyHidden = false; } - // 更新搜索框状态和样式 + // 更新搜索框状态 this.setData({ - searchSectionOpacity: searchSectionOpacity, - searchSectionTransform: searchSectionTransform, isSearchBarFullyHidden: isSearchBarFullyHidden, lastScrollTop: scrollTop }); diff --git a/pages/index/index.wxml b/pages/index/index.wxml index dbc81bb..957e915 100644 --- a/pages/index/index.wxml +++ b/pages/index/index.wxml @@ -2,7 +2,6 @@ 专业的鸡蛋交易平台 diff --git a/pages/index/index.wxss b/pages/index/index.wxss index dd3dcaa..7d15749 100644 --- a/pages/index/index.wxss +++ b/pages/index/index.wxss @@ -26,8 +26,11 @@ page { 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; - max-height: 200rpx; /* 设置一个具体的最大高度,确保过渡效果生效 */ + will-change: opacity, transform, height; + max-height: 200rpx; + opacity: 1; + transform: translateY(0); + height: auto; } /* 顶部搜索区域完全隐藏状态 - 用于平滑收缩高度 */ @@ -37,7 +40,8 @@ page { margin-bottom: 0; pointer-events: none; opacity: 0; - transform: translateY(-100%); + transform: translateY(-50rpx); + height: 0; } /* 标题样式 */