Browse Source

修复底部遮挡问题和分页加载逻辑

pull/1/head
徐飞洋 2 months ago
parent
commit
771bdb0466
  1. 13
      pages/index/index.js
  2. 1
      pages/index/index.wxml
  3. 19
      pages/index/index.wxss

13
pages/index/index.js

@ -132,18 +132,10 @@ Page({
// 切换按钮显示/隐藏到侧边栏 // 切换按钮显示/隐藏到侧边栏
toggleSidebarBtn() { toggleSidebarBtn() {
// 如果当前不在顶部,点击则隐藏按钮
if (this.data.lastScrollTop > 50) {
this.setData({
sidebarBtnHidden: true
});
wx.setStorageSync('sidebarBtnHidden', true);
} else {
this.setData({ this.setData({
sidebarBtnHidden: !this.data.sidebarBtnHidden sidebarBtnHidden: !this.data.sidebarBtnHidden
}); });
wx.setStorageSync('sidebarBtnHidden', !this.data.sidebarBtnHidden); wx.setStorageSync('sidebarBtnHidden', !this.data.sidebarBtnHidden);
}
}, },
// 触摸开始事件 // 触摸开始事件
@ -738,6 +730,9 @@ Page({
const totalPages = res.totalPages || Math.ceil(totalGoods / this.data.pageSize); const totalPages = res.totalPages || Math.ceil(totalGoods / this.data.pageSize);
const hasMoreData = page < totalPages && res.products.length > 0; const hasMoreData = page < totalPages && res.products.length > 0;
// 如果返回的商品数量小于每页数量,说明没有更多数据了
const actualHasMoreData = res.products.length >= this.data.pageSize && page < totalPages;
// 更新缓存(加载更多时追加数据) // 更新缓存(加载更多时追加数据)
const updatedCache = { ...this.data.categoryQueryCache }; const updatedCache = { ...this.data.categoryQueryCache };
if (isLoadMore && updatedCache[cacheKey]) { if (isLoadMore && updatedCache[cacheKey]) {
@ -751,7 +746,7 @@ Page({
} }
this.setData({ this.setData({
hasMoreData, hasMoreData: actualHasMoreData,
categoryQueryCache: updatedCache, categoryQueryCache: updatedCache,
lastDataTimestamp: now, lastDataTimestamp: now,
goodsCache: updatedCache[cacheKey] goodsCache: updatedCache[cacheKey]

1
pages/index/index.wxml

@ -87,7 +87,6 @@
class="back-to-top-btn {{showBackToTop ? 'visible' : ''}}" class="back-to-top-btn {{showBackToTop ? 'visible' : ''}}"
bindtap="scrollToTop" bindtap="scrollToTop"
> >
<text class="back-to-top-icon">↑</text>
<text class="back-to-top-text">top</text> <text class="back-to-top-text">top</text>
</view> </view>
<view wx:if="{{showSidebar}}" class="sidebar"> <view wx:if="{{showSidebar}}" class="sidebar">

19
pages/index/index.wxss

@ -43,6 +43,9 @@ page {
min-height: 120rpx; min-height: 120rpx;
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08); box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
border-bottom: 1rpx solid rgba(0, 0, 0, 0.05); border-bottom: 1rpx solid rgba(0, 0, 0, 0.05);
display: flex;
flex-direction: column;
align-items: center;
} }
/* 确保所有主要区域背景一致 */ /* 确保所有主要区域背景一致 */
@ -81,6 +84,8 @@ page {
/* 搜索区域样式调整 */ /* 搜索区域样式调整 */
.top-section-container .search-section { .top-section-container .search-section {
padding: 0 30rpx 15rpx; padding: 0 30rpx 15rpx;
width: 100%;
max-width: 800rpx;
} }
/* 搜索框样式 */ /* 搜索框样式 */
@ -140,12 +145,14 @@ page {
min-height: calc(100vh - 60rpx); min-height: calc(100vh - 60rpx);
position: relative; position: relative;
background: #f5f5f5; background: #f5f5f5;
padding-bottom: calc(env(safe-area-inset-bottom) );
} }
.goods-list { .goods-list {
height: auto; height: auto;
box-sizing: border-box; box-sizing: border-box;
background: #f5f5f5; background: #f5f5f5;
padding-bottom: calc(env(safe-area-inset-bottom) );
} }
/* 标题样式 */ /* 标题样式 */
@ -161,7 +168,7 @@ page {
/* 搜索区域样式 */ /* 搜索区域样式 */
.search-section { .search-section {
width: 100%; width: 100%;
margin: 0 30rpx 0 10rpx; margin: 0;
box-sizing: border-box; box-sizing: border-box;
} }
@ -337,7 +344,7 @@ wx-button:not([size=mini]) {
background: transparent; background: transparent;
border-radius: 0; border-radius: 0;
border: none; border: none;
justify-content: flex-start; justify-content: center;
align-items: center; align-items: center;
} }
@ -606,6 +613,7 @@ wx-button:not([size=mini]) {
.goods-list-container { .goods-list-container {
padding: 20rpx 24rpx; padding: 20rpx 24rpx;
padding-bottom: 20rpx; padding-bottom: 20rpx;
padding-bottom: calc(env(safe-area-inset-bottom) + 140rpx);
} }
.waterfall-container { .waterfall-container {
@ -1177,6 +1185,7 @@ wx-button:not([size=mini]) {
padding: 0 20rpx; padding: 0 20rpx;
padding-bottom: 20rpx; padding-bottom: 20rpx;
min-height: calc(100% - 40rpx); min-height: calc(100% - 40rpx);
padding-bottom: calc(env(safe-area-inset-bottom) + 140rpx);
} }
/* 瀑布流容器 */ /* 瀑布流容器 */
@ -1407,7 +1416,7 @@ wx-button:not([size=mini]) {
align-items: center; align-items: center;
justify-content: center; justify-content: center;
padding: 30rpx 20rpx; padding: 30rpx 20rpx;
padding-bottom: 50rpx; padding-bottom: calc(env(safe-area-inset-bottom) + 10rpx);
color: #999; color: #999;
font-size: 26rpx; font-size: 26rpx;
gap: 20rpx; gap: 20rpx;
@ -1546,9 +1555,9 @@ wx-button:not([size=mini]) {
} }
.back-to-top-text { .back-to-top-text {
font-size: 16rpx; font-size: 30rpx;
color: #1677ff; color: #1677ff;
margin-top: 4rpx; margin-top: 4rpx;
font-weight: 500; font-weight: bold;
text-shadow: 0 1rpx 2rpx rgba(255, 255, 255, 0.8); text-shadow: 0 1rpx 2rpx rgba(255, 255, 255, 0.8);
} }

Loading…
Cancel
Save