diff --git a/pages/index/index.js b/pages/index/index.js index 8f8d15c..f4de797 100644 --- a/pages/index/index.js +++ b/pages/index/index.js @@ -26,6 +26,7 @@ Page({ lastScrollTop: 0, isScrollLocked: false, isSearchBarFullyHidden: false, + isSearchBarFocused: false, // 回到顶部按钮 showBackToTop: false, @@ -688,6 +689,23 @@ Page({ }) }, + // 搜索框获得焦点 + onSearchFocus: function() { + // 当搜索框获得焦点时,固定显示搜索框,不隐藏 + this.setData({ + isSearchBarFocused: true, + isSearchBarFullyHidden: false + }) + }, + + // 搜索框失去焦点 + onSearchBlur: function() { + // 当搜索框失去焦点时,恢复正常的隐藏逻辑 + this.setData({ + isSearchBarFocused: false + }) + }, + // 切换地区选择器 toggleRegionPicker: function() { this.setData({ @@ -848,20 +866,25 @@ Page({ // 滚动事件处理 onScroll: function(e) { const { scrollTop } = e.detail; + const lastScrollTop = this.data.lastScrollTop; // 只控制搜索区域的完全显示/隐藏状态,使用CSS类统一控制过渡效果 - // 简化逻辑,避免iOS上的兼容性问题 - let isSearchBarFullyHidden = false; - - // 增加iOS兼容性处理,使用更简单的触发逻辑 - if (scrollTop > 150) { - // 当滚动距离超过150rpx时,完全隐藏搜索区域 - isSearchBarFullyHidden = true; - } - - // 当滚动回到顶部时,显示搜索区域 - if (scrollTop <= 100) { - isSearchBarFullyHidden = false; + let isSearchBarFullyHidden = this.data.isSearchBarFullyHidden; + + // 如果搜索框被选中,则不隐藏 + if (!this.data.isSearchBarFocused) { + // 判断滚动方向 + if (scrollTop > lastScrollTop) { + // 向下滚动,隐藏搜索框 + if (scrollTop > 150) { + isSearchBarFullyHidden = true; + } + } else { + // 向上滚动,显示搜索框 + if (scrollTop <= 100) { + isSearchBarFullyHidden = false; + } + } } // 更新搜索框状态 diff --git a/pages/index/index.wxml b/pages/index/index.wxml index 5ac2070..fa586e9 100644 --- a/pages/index/index.wxml +++ b/pages/index/index.wxml @@ -23,6 +23,8 @@ placeholder-class="search-placeholder" value="{{searchKeyword}}" bindinput="onSearchInput" + bindfocus="onSearchFocus" + bindblur="onSearchBlur" /> diff --git a/pages/index/index.wxss b/pages/index/index.wxss index 3618a7f..746af40 100644 --- a/pages/index/index.wxss +++ b/pages/index/index.wxss @@ -25,30 +25,24 @@ page { padding: 10rpx 0; margin-bottom: 20rpx; overflow: hidden; - transition: opacity 0.4s ease-in-out, transform 0.4s ease-in-out, visibility 0.4s ease-in-out; - -webkit-transition: opacity 0.4s ease-in-out, -webkit-transform 0.4s ease-in-out, visibility 0.4s ease-in-out; - will-change: opacity, transform; + transition: max-height 0.4s ease-in-out, opacity 0.4s ease-in-out, transform 0.4s ease-in-out, margin-bottom 0.4s ease-in-out, padding 0.4s ease-in-out; + -webkit-transition: max-height 0.4s ease-in-out, opacity 0.4s ease-in-out, -webkit-transform 0.4s ease-in-out, margin-bottom 0.4s ease-in-out, padding 0.4s ease-in-out; + will-change: opacity, transform, max-height, margin; + max-height: 200rpx; opacity: 1; transform: translateY(0); -webkit-transform: translateY(0); - visibility: visible; - height: auto; - /* 固定高度,避免iOS上的布局抖动 */ - min-height: 160rpx; } /* 顶部搜索区域完全隐藏状态 - 用于平滑收缩高度 */ .top-hidden { - opacity: 0; - transform: translateY(-100%); - -webkit-transform: translateY(-100%); + max-height: 0; + padding: 0; + margin-bottom: 0; pointer-events: none; - visibility: hidden; - /* 保持高度不变,避免iOS上的布局抖动 */ - height: auto; - min-height: 160rpx; - padding: 10rpx 0; - margin-bottom: 20rpx; + opacity: 0; + transform: translateY(-20rpx); + -webkit-transform: translateY(-20rpx); } /* 标题样式 */