From 075928124c1690fa1ca7225f815341526f07c500 Mon Sep 17 00:00:00 2001
From: RyRh <3123294924@qq.com>
Date: Tue, 25 Aug 2026 11:21:21 +0800
Subject: [PATCH] =?UTF-8?q?=E8=B4=A7=E7=9B=98=E9=A1=B5=E5=AF=BC=E8=88=AA?=
 =?UTF-8?q?=E6=A0=8F=E5=8E=BB=E9=99=A4=EF=BC=8C=E4=BF=AE=E5=A4=8D=E5=A5=87?=
 =?UTF-8?q?=E6=95=B0=E4=B8=AA=E5=95=86=E5=93=81=E6=A0=B7=E5=BC=8F=E9=94=99?=
 =?UTF-8?q?=E8=AF=AF=EF=BC=8C=E4=BF=AE=E6=94=B9=E8=A7=A6=E5=BA=95=E5=8A=A0?=
 =?UTF-8?q?=E8=BD=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages.json                                |   1 +
 pages/products/components/ProductGrid.vue | 103 +++++-----------------
 pages/products/components/SearchBar.vue   |  16 +++-
 pages/products/products.css               |   7 +-
 pages/products/products.vue               |  74 ++++++++++------
 5 files changed, 88 insertions(+), 113 deletions(-)

diff --git a/pages.json b/pages.json
index 5311891..7bb26a0 100644
--- a/pages.json
+++ b/pages.json
@@ -12,6 +12,7 @@
 			"path": "pages/products/products",
 			"style": {
 				"navigationBarTitleText": "产品中心",
+				"navigationStyle": "custom",
 				"usingComponents": {}
 			}
 		},
diff --git a/pages/products/components/ProductGrid.vue b/pages/products/components/ProductGrid.vue
index 31b4843..2e9313b 100644
--- a/pages/products/components/ProductGrid.vue
+++ b/pages/products/components/ProductGrid.vue
@@ -13,7 +13,7 @@
     </view>
 
     <!-- 商品网格滚动区 -->
-    <scroll-view scroll-y class="product-scroll">
+    <scroll-view scroll-y class="product-scroll" :lower-threshold="100" :scroll-top="scrollTopVal" :scroll-with-animation="false" @scrolltolower="onScrollToLower">
       <view class="product-grid" v-if="list.length > 0">
         <view
           class="product-card"
@@ -51,24 +51,11 @@
         <text class="empty-text">没有找到相关商品</text>
       </view>
 
-      <!-- 分页 -->
-      <view class="pagination" v-if="total > 0">
-        <text class="page-info">显示 {{ start }}-{{ end }} 共 {{ total }} 个产品</text>
-        <view class="page-controls">
-          <view class="page-btn" :class="{ disabled: current === 1 }" @tap="onPrev">上一页</view>
-          <view
-            class="page-num"
-            :class="{ active: current === item }"
-            v-for="(item, index) in pageNumbers"
-            :key="index"
-            @tap="onGoPage(item)"
-          >{{ item }}</view>
-          <view class="page-btn" :class="{ disabled: current === totalPages }" @tap="onNext">下一页</view>
-        </view>
-        <view class="page-size"><text>{{ pageSize }}/页</text></view>
+      <!-- 底部加载提示 -->
+      <view class="load-tip" v-if="list.length > 0">
+        <text v-if="loading">加载中...</text>
+        <text v-else-if="!hasMore">没有更多了</text>
       </view>
-
-      <view class="loading-more" v-if="loading"><text>加载中...</text></view>
     </scroll-view>
   </view>
 </template>
@@ -80,31 +67,25 @@ export default {
     list: { type: Array, default: () => [] },
     subCategories: { type: Array, default: () => [] },
     activeSubId: { type: [String, Number], default: '' },
-    total: { type: Number, default: 0 },
-    current: { type: Number, default: 1 },
-    pageSize: { type: Number, default: 10 },
-    totalPages: { type: Number, default: 1 },
-    pageNumbers: { type: Array, default: () => [] },
-    start: { type: Number, default: 1 },
-    end: { type: Number, default: 10 },
-    loading: { type: Boolean, default: false }
+    hasMore: { type: Boolean, default: true },
+    loading: { type: Boolean, default: false },
+    scrollTopVal: { type: Number, default: 0 }
   },
   methods: {
     selectSub(id) { this.$emit('sub-select', id) },
     onTapProduct(item) { this.$emit('product-click', item) },
-    onPrev() { if (this.current > 1) this.$emit('page-change', this.current - 1) },
-    onNext() { if (this.current < this.totalPages) this.$emit('page-change', this.current + 1) },
-    onGoPage(page) { this.$emit('page-change', page) }
+    onScrollToLower() { this.$emit('scroll-to-lower') }
   }
 }
 </script>
 
 <style scoped>
-/* 右侧内容区 - 上下分:顶部条件 + 下方滚动 */
+/* 右侧内容区 - 上下分:顶部条件 + 下方滚动
+   flex:1 与 height:100% 冲突，二选一（保留 flex:1） */
 .right-content {
   flex: 1;
   min-width: 0;
-  height: 100%;
+  min-height: 0;
   display: flex;
   flex-direction: column;
   background: #f2f2f2;
@@ -135,22 +116,23 @@ export default {
   color: #ff6800;
 }
 
-/* 滚动商品区 */
+/* 滚动商品区 - uni-app scroll-view 在 flex 布局里必须同时有 flex:1 + height:0
+   仅 min-height:0 无法让部分端的 scroll-view 正确计算内部 viewport 高度 */
 .product-scroll {
   flex: 1;
+  height: 0;
   min-height: 0;
   overflow: hidden;
 }
 
-/* 商品网格 - 2列自适应(避免宽度+间距同时固定导致挤压) */
+/* 商品网格 - 固定2列 grid，不会因商品个数变化而拉伸占行 */
 .product-grid {
-  display: flex;
-  flex-wrap: wrap;
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
   gap: 16rpx;
   padding: 20rpx;
 }
 .product-card {
-  flex: 1 1 calc(50% - 8rpx);
   min-width: 0;
   background: #ffffff;
   border-radius: 12rpx;
@@ -212,53 +194,8 @@ export default {
   line-height: 1.2;
 }
 
-/* 分页 */
-.pagination {
-  padding: 32rpx 20rpx;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 20rpx;
-}
-.page-info {
-  font-size: 22rpx;
-  color: #999999;
-}
-.page-controls {
-  display: flex;
-  align-items: center;
-  gap: 12rpx;
-}
-.page-btn {
-  padding: 10rpx 20rpx;
-  font-size: 24rpx;
-  color: #666666;
-  background: #f5f5f5;
-  border-radius: 8rpx;
-}
-.page-btn.disabled {
-  color: #cccccc;
-}
-.page-num {
-  width: 56rpx;
-  height: 56rpx;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 24rpx;
-  color: #666666;
-  background: #f5f5f5;
-  border-radius: 8rpx;
-}
-.page-num.active {
-  background: #ff6800;
-  color: #ffffff;
-}
-.page-size {
-  font-size: 22rpx;
-  color: #999999;
-}
-.loading-more {
+/* 底部加载提示 */
+.load-tip {
   padding: 32rpx;
   text-align: center;
   font-size: 24rpx;
diff --git a/pages/products/components/SearchBar.vue b/pages/products/components/SearchBar.vue
index da47106..e8de8bb 100644
--- a/pages/products/components/SearchBar.vue
+++ b/pages/products/components/SearchBar.vue
@@ -1,6 +1,6 @@
 <template>
   <!-- 搜索栏 -->
-  <view class="search-bar">
+  <view class="search-bar" :style="{ paddingTop: statusBarHeight + 'px' }">
     <view class="search-input-wrap">
       <text class="search-icon">🔍</text>
       <input
@@ -28,6 +28,19 @@ export default {
       default: ''
     }
   },
+  data() {
+    return {
+      statusBarHeight: 20
+    }
+  },
+  created() {
+    try {
+      const sysInfo = uni.getSystemInfoSync()
+      this.statusBarHeight = sysInfo.statusBarHeight || 20
+    } catch (e) {
+      this.statusBarHeight = 20
+    }
+  },
   methods: {
     onInput(e) {
       this.$emit('input', e.detail.value)
@@ -50,6 +63,7 @@ export default {
   padding: 20rpx 32rpx;
   background: #ffffff;
   border-bottom: 2rpx solid #f5f5f5;
+  box-sizing: border-box;
 }
 .search-input-wrap {
   flex: 1;
diff --git a/pages/products/products.css b/pages/products/products.css
index 32bcd48..f739d44 100644
--- a/pages/products/products.css
+++ b/pages/products/products.css
@@ -4,7 +4,7 @@
 .products-page {
   display: flex;
   flex-direction: column;
-  height: 100vh;
+  overflow: hidden;  /* 唯一滚动源 = scroll-view，整页绝不兜底滚动 */
   background: #f2f2f2;
 }
 
@@ -16,12 +16,13 @@
   min-height: 0;
 }
 
-/* 右侧容器 - 自动占满剩余宽度(高度自动撑开,内部由 ProductGrid 自己滚动) */
+/* 右侧容器 - 自动占满剩余宽度(高度自动撑开,内部由 ProductGrid 自己滚动)
+   flex:1 与 height:100% 冲突，必须二选一，否则 flex 链路断裂 */
 .right-wrap {
   flex: 1;
   min-width: 0;
+  min-height: 0;
   display: flex;
   flex-direction: column;
-  height: 100%;
   overflow: hidden;
 }
diff --git a/pages/products/products.vue b/pages/products/products.vue
index 94b6550..9e35dfd 100644
--- a/pages/products/products.vue
+++ b/pages/products/products.vue
@@ -1,6 +1,6 @@
 <template>
   <!-- 产品列表页 - 印美达 Inkreach -->
-  <view class="products-page">
+  <view class="products-page" :style="{ height: windowHeight + 'px' }">
     <!-- 搜索栏 -->
     <SearchBar
       :keyword="searchKeyword"
@@ -39,17 +39,12 @@
           :list="products"
           :sub-categories="subCategories"
           :active-sub-id="activeSubCategory"
-          :total="pagination.total"
-          :current="pagination.current"
-          :page-size="pagination.pageSize"
-          :total-pages="pagination.totalPages"
-          :page-numbers="pageNumbers"
-          :start="pagination.start"
-          :end="pagination.end"
+          :has-more="hasMore"
           :loading="loadingMore"
+          :scroll-top-val="scrollTopVal"
           @sub-select="selectSubCategory"
           @product-click="goDetail"
-          @page-change="loadGoods"
+          @scroll-to-lower="onScrollToLower"
         />
       </view>
     </view>
@@ -104,19 +99,26 @@ export default {
       showFilter: false,
       filterGroups: [],
       pagination: {
-        start: 1,
-        end: 10,
         total: 0,
         current: 1,
-        pageSize: 10,
-        totalPages: 0
+        pageSize: 10
       },
-      pageNumbers: [],
+      hasMore: true,
       loadingMore: false,
-      products: []
+      products: [],
+      windowHeight: 667,
+      scrollTopVal: 0
     }
   },
   async onLoad() {
+    try {
+      const sysInfo = uni.getSystemInfoSync()
+      // windowHeight 已自动扣除 uni-app 默认导航栏 & TabBar 高度
+      // 当前页是 navigationStyle:custom + TabBar 页，正好匹配可视区
+      this.windowHeight = sysInfo.windowHeight || 667
+    } catch (e) {
+      this.windowHeight = 667
+    }
     await this.initData()
     this.loadSubCategories('all')
     await this.loadGoods(1)
@@ -232,28 +234,30 @@ export default {
         }))
 
         const total = data.total || 0
-        const totalPages = Math.ceil(total / pageSize) || 1
-        var pageNumbers = []
-        for (var i = Math.max(1, currentPage - 2); i <= Math.min(totalPages, currentPage + 2); i++) {
-          pageNumbers.push(i)
+
+        if (currentPage === 1) {
+          // 整表替换 = 筛选/分类/国家/搜索/初始化 等切换 → 滚动条回顶部
+          this.products = products
+          this.resetScrollToTop()
+        } else {
+          // 分页追加（触底加载）→ 保持滚动位置，不回到顶部
+          this.products = this.products.concat(products)
         }
 
-        this.products = products
         this.pagination = {
-          start: total === 0 ? 0 : (currentPage - 1) * pageSize + 1,
-          end: Math.min(currentPage * pageSize, total),
           total: total,
           current: currentPage,
-          pageSize: pageSize,
-          totalPages: totalPages
+          pageSize: pageSize
         }
-        this.pageNumbers = pageNumbers
+        this.hasMore = this.products.length < total
         this.loadingMore = false
 
         console.log(
           '[loadGoods] total=' + total +
           ', page=' + currentPage +
-          ', items=' + products.length
+          ', items=' + products.length +
+          ', loaded=' + this.products.length +
+          ', hasMore=' + this.hasMore
         )
       } catch (err) {
         console.error('[loadGoods Error]', err)
@@ -329,6 +333,24 @@ export default {
       this.loadGoods(1)
     },
 
+    onScrollToLower() {
+      if (this.loadingMore || !this.hasMore) return
+      this.loadingMore = true
+      this.loadGoods(this.pagination.current + 1)
+    },
+
+    /**
+     * 把商品列表滚动条回到顶部。
+     * uni-app scroll-view 的 :scroll-top 仅在值变化时触发滚动，
+     * 所以先写到一个大值（必定变化），再 nextTick 写 0，保证每次都能回到顶部。
+     */
+    resetScrollToTop() {
+      this.scrollTopVal = 99999
+      this.$nextTick(() => {
+        this.scrollTopVal = 0
+      })
+    },
+
     async selectCountry(id) {
       // 如果点击的是已选中的国家 → 取消选中
       if (this.selectedCountry === id) {