Browse Source

修复下拉刷新和商品详情页面滚动问题

pull/12/head
徐飞洋 2 months ago
parent
commit
ec8ff04b29
  1. 38
      pages/goods-detail/goods-detail.js
  2. 6
      pages/goods-detail/goods-detail.wxml
  3. 8
      pages/goods-detail/goods-detail.wxss
  4. 2
      pages/index/index.json
  5. 2
      pages/index/index.wxml
  6. 22
      pages/index/index.wxss

38
pages/goods-detail/goods-detail.js

@ -645,6 +645,7 @@ Page({
favoriteGoods: [], // 收藏商品数据 favoriteGoods: [], // 收藏商品数据
loadingHome: false, // 首页数据加载状态 loadingHome: false, // 首页数据加载状态
loadingFavorite: false, // 收藏数据加载状态 loadingFavorite: false, // 收藏数据加载状态
scrollTop: 0, // 记录页面滚动位置
// 新增以下字段: // 新增以下字段:
videoCoverUrl: null, // 视频封面图片URL videoCoverUrl: null, // 视频封面图片URL
isExtractingCover: false, // 是否正在提取封面 isExtractingCover: false, // 是否正在提取封面
@ -2426,20 +2427,26 @@ Page({
// 对比价格功能:处理按钮点击事件 // 对比价格功能:处理按钮点击事件
onCompareClick: function () { onCompareClick: function () {
console.log('用户点击了对比价格按钮,准备显示弹窗'); console.log('用户点击了对比价格按钮,准备显示弹窗');
// 立即显示弹窗,不等待数据加载
this.setData({
showCompareModal: true,
activeTab: 'home' // 默认显示首页数据选项卡
});
// 打印弹窗状态,用于调试 // 直接获取当前页面滚动位置
console.log('弹窗状态设置为:', this.data.showCompareModal); wx.createSelectorQuery().selectViewport().scrollOffset(function(res) {
console.log('记录当前滚动位置:', res.scrollTop);
// 保存滚动位置并显示弹窗
this.setData({
scrollTop: res.scrollTop,
showCompareModal: true,
activeTab: 'home' // 默认显示首页数据选项卡
});
// 打印弹窗状态,用于调试
console.log('弹窗状态设置为:', this.data.showCompareModal);
// 加载首页数据 // 加载首页数据
this.loadHomeGoods(); this.loadHomeGoods();
// 加载收藏数据 // 加载收藏数据
this.loadFavoriteGoods(); this.loadFavoriteGoods();
}.bind(this)).exec();
}, },
// 关闭对比价格弹窗 // 关闭对比价格弹窗
@ -2447,6 +2454,15 @@ Page({
this.setData({ this.setData({
showCompareModal: false showCompareModal: false
}); });
// 恢复页面滚动位置
setTimeout(() => {
console.log('恢复滚动位置:', this.data.scrollTop);
wx.pageScrollTo({
scrollTop: this.data.scrollTop,
duration: 0
});
}, 100);
}, },
// 阻止事件冒泡 // 阻止事件冒泡

6
pages/goods-detail/goods-detail.wxml

@ -1,5 +1,5 @@
<!-- pages/goods-detail/goods-detail.wxml --> <!-- pages/goods-detail/goods-detail.wxml -->
<view class="goods-detail-page"> <view class="goods-detail-page {{showCompareModal ? 'no-scroll' : ''}}">
<!-- 在页面最顶部添加以下代码 --> <!-- 在页面最顶部添加以下代码 -->
<!-- 隐藏的video组件,用于视频封面截图 --> <!-- 隐藏的video组件,用于视频封面截图 -->
<video <video
@ -212,7 +212,7 @@
</view> </view>
<!-- 底部弹出层 - 对比价格 --> <!-- 底部弹出层 - 对比价格 -->
<view wx:if="{{showCompareModal}}" class="compare-modal-overlay" bindtap="closeCompareModal" catchtouchmove="true"> <view wx:if="{{showCompareModal}}" class="compare-modal-overlay" bindtap="closeCompareModal">
<view class="compare-modal-container" catchtap="stopPropagation"> <view class="compare-modal-container" catchtap="stopPropagation">
<view class="compare-modal-header"> <view class="compare-modal-header">
<text class="compare-modal-title">对比价格</text> <text class="compare-modal-title">对比价格</text>
@ -328,7 +328,7 @@
</block> </block>
</text> </text>
<text class="compare-goods-region-time"> <text class="compare-goods-region-time">
{售出时间}{{item.province || item.region || '暂无地区'}} | {{item.formattedDate || '暂无时间'}} {{item.province || item.region || '暂无地区'}} | {{item.formattedDate || '暂无时间'}}
</text> </text>
</view> </view>
</view> </view>

8
pages/goods-detail/goods-detail.wxss

@ -7,6 +7,14 @@
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
} }
/* 弹窗显示时固定页面滚动 */
.no-scroll {
overflow: hidden !important;
position: fixed !important;
width: 100% !important;
height: 100% !important;
}
/* 页面头部 */ /* 页面头部 */
.page-header { .page-header {
display: flex; display: flex;

2
pages/index/index.json

@ -2,7 +2,7 @@
"usingComponents": { "usingComponents": {
"navigation-bar": "/components/navigation-bar/navigation-bar" "navigation-bar": "/components/navigation-bar/navigation-bar"
}, },
"enablePullDownRefresh": true, "enablePullDownRefresh": false,
"backgroundTextStyle": "dark", "backgroundTextStyle": "dark",
"backgroundColor": "#f8f8f8" "backgroundColor": "#f8f8f8"
} }

2
pages/index/index.wxml

@ -146,7 +146,7 @@
wx:key="id" wx:key="id"
data-item="{{item}}" data-item="{{item}}"
bindtap="viewGoodsDetail" bindtap="viewGoodsDetail"
wx:if="{{!item.isAd && filteredGoods.length > 0}}" wx:if="{{!item.isAd}}"
> >
<view class="product-card {{item.status === 'sold_out' ? 'sold-out-grayscale' : ''}}"> <view class="product-card {{item.status === 'sold_out' ? 'sold-out-grayscale' : ''}}">
<!-- 售空商品半透明覆盖层 --> <!-- 售空商品半透明覆盖层 -->

22
pages/index/index.wxss

@ -29,6 +29,28 @@ page {
background: transparent; background: transparent;
} }
/* 空状态提示样式 */
.empty-state {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 100rpx 20rpx;
text-align: center;
min-height: 60vh;
}
.empty-state-text {
font-size: 36rpx;
color: #999;
margin-bottom: 20rpx;
}
.empty-state-subtext {
font-size: 28rpx;
color: #ccc;
}
/* 为整个容器添加修复 */ /* 为整个容器添加修复 */
.top-section-container { .top-section-container {
position: fixed; position: fixed;

Loading…
Cancel
Save