From a2f34b3914d5f46961305393d723ed1b96e0d9a4 Mon Sep 17 00:00:00 2001 From: Trae AI Date: Sat, 27 Dec 2025 11:40:22 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8DiOS=E7=B3=BB=E7=BB=9F?= =?UTF-8?q?=E6=90=9C=E7=B4=A2=E6=A1=86=E9=9A=90=E8=97=8F=E6=97=B6=E9=A1=B5?= =?UTF-8?q?=E9=9D=A2=E5=BC=BA=E8=A1=8C=E4=B8=8B=E6=BB=91=E5=92=8C=E8=BF=87?= =?UTF-8?q?=E6=B8=A1=E5=8A=A8=E7=94=BB=E4=B8=8D=E5=85=BC=E5=AE=B9=E9=97=AE?= =?UTF-8?q?=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- pages/index/index.js | 102 ++++++++++++++----------------- pages/index/index.wxml | 4 +- pages/index/index.wxss | 135 +++++++++++++++++++++++++++++++++++------ 3 files changed, 163 insertions(+), 78 deletions(-) diff --git a/pages/index/index.js b/pages/index/index.js index f4de797..ee9b811 100644 --- a/pages/index/index.js +++ b/pages/index/index.js @@ -26,7 +26,6 @@ Page({ lastScrollTop: 0, isScrollLocked: false, isSearchBarFullyHidden: false, - isSearchBarFocused: false, // 回到顶部按钮 showBackToTop: false, @@ -192,11 +191,23 @@ Page({ onLoad() { console.log('首页初始化') - const savedBtnTop = wx.getStorageSync('sidebarBtnTop'); - const savedBtnHidden = wx.getStorageSync('sidebarBtnHidden'); + + // 获取系统信息，处理iOS特定兼容性 const systemInfo = wx.getSystemInfoSync(); + const isIOS = systemInfo.system.toLowerCase().includes('ios'); const screenHeight = systemInfo.screenHeight * 2; + // 设置iOS特定标志 + if (isIOS) { + this.setData({ + isIOS: true + }); + console.log('iOS设备检测到，启用兼容模式'); + } + + const savedBtnTop = wx.getStorageSync('sidebarBtnTop'); + const savedBtnHidden = wx.getStorageSync('sidebarBtnHidden'); + let defaultTop = screenHeight * 0.5; if (savedBtnTop !== '' && savedBtnTop !== -100) { const minTop = screenHeight * 0.2; @@ -212,6 +223,19 @@ Page({ }); this.checkAndRestoreLoginStatus() this.loadGoods() + + // 计算搜索区域高度 + const query = wx.createSelectorQuery(); + query.select('.top-section-container').boundingClientRect(); + query.exec((res) => { + if (res[0]) { + const searchHeight = res[0].height; + this.setData({ + searchSectionHeight: searchHeight + }); + console.log('搜索区域高度:', searchHeight); + } + }); }, onShow: function () { @@ -689,23 +713,6 @@ Page({ }) }, - // 搜索框获得焦点 - onSearchFocus: function() { - // 当搜索框获得焦点时，固定显示搜索框，不隐藏 - this.setData({ - isSearchBarFocused: true, - isSearchBarFullyHidden: false - }) - }, - - // 搜索框失去焦点 - onSearchBlur: function() { - // 当搜索框失去焦点时，恢复正常的隐藏逻辑 - this.setData({ - isSearchBarFocused: false - }) - }, - // 切换地区选择器 toggleRegionPicker: function() { this.setData({ @@ -863,52 +870,37 @@ Page({ }); }, - // 滚动事件处理 + // 滚动事件处理 - 简化版本 onScroll: function(e) { const { scrollTop } = e.detail; - const lastScrollTop = this.data.lastScrollTop; - - // 只控制搜索区域的完全显示/隐藏状态，使用CSS类统一控制过渡效果 - let isSearchBarFullyHidden = this.data.isSearchBarFullyHidden; - - // 如果搜索框被选中，则不隐藏 - if (!this.data.isSearchBarFocused) { - // 判断滚动方向 - if (scrollTop > lastScrollTop) { - // 向下滚动，隐藏搜索框 - if (scrollTop > 150) { - isSearchBarFullyHidden = true; - } - } else { - // 向上滚动，显示搜索框 - if (scrollTop <= 100) { - isSearchBarFullyHidden = false; - } - } - } - // 更新搜索框状态 - this.setData({ - isSearchBarFullyHidden: isSearchBarFullyHidden, - lastScrollTop: scrollTop - }); + // 使用简单的阈值判断 + const shouldHide = scrollTop > 100; + + // 只有当状态需要改变时才更新 + if (shouldHide !== this.data.isSearchBarFullyHidden) { + this.setData({ + isSearchBarFullyHidden: shouldHide, + lastScrollTop: scrollTop + }); + } else { + // 只更新滚动位置 + this.setData({ + lastScrollTop: scrollTop + }); + } - // 回到顶部按钮显示逻辑 + // 回到顶部按钮显示逻辑 if (scrollTop > 300 && !this.data.showBackToTop) { this.setData({ showBackToTop: true }); } else if (scrollTop <= 300 && this.data.showBackToTop) { this.setData({ showBackToTop: false }); } - const { scrollHeight, clientHeight } = e.detail; - const distanceToBottom = scrollHeight - scrollTop - clientHeight; - - const app = getApp(); - if (!app || !app.globalData) { - return; + const app = getApp(); + if (app && app.globalData) { + app.globalData.showTabBar = true; } - - app.globalData.showTabBar = true; }, // 回到顶部 diff --git a/pages/index/index.wxml b/pages/index/index.wxml index fa586e9..b36a78b 100644 --- a/pages/index/index.wxml +++ b/pages/index/index.wxml @@ -1,7 +1,7 @@ 专业的鸡蛋交易平台 @@ -23,8 +23,6 @@ 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 746af40..066db10 100644 --- a/pages/index/index.wxss +++ b/pages/index/index.wxss @@ -16,33 +16,128 @@ page { display: flex; flex-direction: column; box-sizing: border-box; - background-color: #f8f8f8; + /* 移除背景色，让page的背景渐变显示出来 */ } -/* 顶部搜索区域容器 */ -.top-section { - flex-shrink: 0; - padding: 10rpx 0; - margin-bottom: 20rpx; - overflow: hidden; - 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; +/* 顶部搜索区域容器 - 保持紫色渐变背景 */ +.top-section-container { + position: fixed; + top: 0; + left: 0; + right: 0; + z-index: 1000; + background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%); + transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94); transform: translateY(0); - -webkit-transform: translateY(0); + will-change: transform; + -webkit-transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94); +} + +/* 隐藏时的状态 */ +.top-section-container.top-hidden { + transform: translateY(-100%); + opacity: 0; +} + +/* 标题样式调整 */ +.top-section-container .title { + padding: 30rpx 0 20rpx 0; + font-size: 36rpx; + font-weight: bold; + text-align: center; + color: white; + transition: all 0.3s ease; } -/* 顶部搜索区域完全隐藏状态 - 用于平滑收缩高度 */ -.top-hidden { - max-height: 0; +.top-section-container.top-hidden .title { padding: 0; - margin-bottom: 0; - pointer-events: none; + font-size: 0; + opacity: 0; +} + +/* 搜索区域样式调整 */ +.top-section-container .search-section { + padding: 0 30rpx 30rpx; + transition: all 0.3s ease; +} + +.top-section-container.top-hidden .search-section { + padding: 0 30rpx; + opacity: 0; +} + +/* 搜索框样式 */ +.top-section-container .search-bar { + display: flex; + align-items: center; + background: white; + border-radius: 50rpx; + padding: 10rpx 20rpx; + box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1); + transition: all 0.3s ease; +} + +.top-section-container.top-hidden .search-bar { + transform: scale(0.9); opacity: 0; - transform: translateY(-20rpx); - -webkit-transform: translateY(-20rpx); +} + +/* 商品列表区域 - 调整位置 */ +.goods-section { + margin-top: 240rpx; /* 给搜索区域留出空间 */ + height: calc(100vh - 240rpx); + background: transparent; /* 透明背景，显示page的渐变 */ +} + +/* 当搜索框隐藏时调整内边距 */ +.top-section-container.top-hidden ~ .goods-section { + margin-top: 100rpx; + height: calc(100vh - 100rpx); +} + +/* 品种筛选区域调整 */ +.category-section { + position: fixed; + top: 200rpx; /* 根据搜索区域高度调整 */ + left: 0; + right: 0; + z-index: 999; + background: white; + transition: top 0.3s ease; + padding: 20rpx 0; + border-bottom: 2rpx solid #f0f0f0; +} + +.top-section-container.top-hidden ~ .category-section { + top: 60rpx; /* 搜索区域隐藏后上移 */ +} + +/* iOS专用修复 */ +@media screen and (-webkit-min-device-pixel-ratio:0) { + .top-section-container { + -webkit-transform: translateZ(0); + transform: translateZ(0); + } + + .top-section-container.top-hidden { + -webkit-transform: translate3d(0, -100%, 0); + transform: translate3d(0, -100%, 0); + } + + /* 防止iOS弹性滚动导致的视觉问题 */ + .goods-list { + -webkit-overflow-scrolling: touch; + } +} + +/* 确保滚动视图有正确的容器高度 */ +.goods-section { + position: relative; +} + +.goods-list { + height: 100%; + box-sizing: border-box; } /* 标题样式 */