修复首页上滑广告隐藏时出现大量空白的问题 #14

Merged
hzj merged 1 commits from ly1 into Xfy 2 months ago
  1. 27
      pages/index/index.js
  2. 5
      pages/index/index.wxml
  3. 22
      pages/index/index.wxss
  4. 2
      project.private.config.json

27
pages/index/index.js

@ -2377,32 +2377,7 @@ Page({
} }
} }
// 动态调整top-section-container的高度和商品列表的位置,确保布局正确 // 动态调整已通过CSS过渡和动态类实现,此处不再需要直接操作DOM
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';
}
}
});
// 搜索框始终固定显示,不做隐藏处理 // 搜索框始终固定显示,不做隐藏处理

5
pages/index/index.wxml

@ -1,6 +1,6 @@
<view class="container"> <view class="container">
<!-- 顶部搜索区域容器 - 始终固定显示 --> <!-- 顶部搜索区域容器 - 始终固定显示 -->
<view class="top-section-container"> <view class="top-section-container {{headerElementsHidden ? 'hidden-elements' : 'show-elements'}}">
<!-- 广告走马灯轮播图 --> <!-- 广告走马灯轮播图 -->
<view class="ad-carousel" style="transform: translateY({{headerElementsHidden ? '-100%' : '0'}}); opacity: {{headerElementsHidden ? '0' : '1'}}; transition: transform 0.3s ease, opacity 0.3s ease;"> <view class="ad-carousel" style="transform: translateY({{headerElementsHidden ? '-100%' : '0'}}); opacity: {{headerElementsHidden ? '0' : '1'}}; transition: transform 0.3s ease, opacity 0.3s ease;">
@ -251,7 +251,7 @@
</view> </view>
<!-- 商品列表区域 --> <!-- 商品列表区域 -->
<view class="goods-section"> <view class="goods-section {{headerElementsHidden ? 'with-hidden-header' : ''}}">
<scroll-view <scroll-view
class="goods-list" class="goods-list"
id="goodsScrollView" id="goodsScrollView"
@ -265,6 +265,7 @@
refresher-background="transparent" refresher-background="transparent"
bindrefresherrefresh="onPullDownRefresh" bindrefresherrefresh="onPullDownRefresh"
bindrefresherrestore="onRestore" bindrefresherrestore="onRestore"
style="padding-top: {{headerElementsHidden ? '175rpx' : '580rpx'}}; transition: padding-top 0.3s ease;"
> >
<view class="goods-list-container"> <view class="goods-list-container">
<!-- 网格布局 --> <!-- 网格布局 -->

22
pages/index/index.wxss

@ -70,7 +70,19 @@ page {
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
overflow: visible; overflow: visible;
transition: height 0.3s ease; transition: all 0.3s ease;
}
/* 隐藏广告和功能按钮时的容器样式 */
.top-section-container.hidden-elements {
height: 175rpx;
min-height: 175rpx;
}
/* 显示广告和功能按钮时的容器样式 */
.top-section-container.show-elements {
height: auto;
min-height: 580rpx;
} }
/* 广告轮播图样式 */ /* 广告轮播图样式 */
@ -160,7 +172,12 @@ page {
background: transparent; background: transparent;
z-index: 1; z-index: 1;
margin-top: 580rpx; margin-top: 580rpx;
transition: margin-top 0.3s ease; transition: all 0.3s ease;
}
/* 隐藏广告时商品区域上移 */
.goods-section.with-hidden-header {
margin-top: 175rpx;
} }
/* 标题样式调整 */ /* 标题样式调整 */
@ -204,7 +221,6 @@ page {
overflow-y: auto; overflow-y: auto;
-webkit-overflow-scrolling: touch; -webkit-overflow-scrolling: touch;
background: transparent; background: transparent;
transition: padding-top 0.3s ease;
} }
/* 品种筛选区域调整 - 确保在商品图层之上,搜索框之下 */ /* 品种筛选区域调整 - 确保在商品图层之上,搜索框之下 */

2
project.private.config.json

@ -1,6 +1,6 @@
{ {
"libVersion": "3.10.3", "libVersion": "3.10.3",
"projectname": "ppp", "projectname": "ly2266",
"setting": { "setting": {
"urlCheck": false, "urlCheck": false,
"coverView": true, "coverView": true,

Loading…
Cancel
Save