feat: page滚动生命周期

src/pages/index/index.vue

@@ -10,8 +10,10 @@
 </route>
 
 <script lang="ts" setup>
+// 必须导入需要用到的页面生命周期（即使在当前页面上没有直接使用到）
+// eslint-disable-next-line unused-imports/no-unused-imports
+import { onPageScroll, onReachBottom } from '@dcloudio/uni-app'
 import useZPaging from 'z-paging/components/z-paging/js/hooks/useZPaging.js'
-// 必须导入需要用到的页面生命周期（即使在当前页面上没有直接使用到）（使用页面滚动）
 
 import { getList } from '@/api/product'
 import { toPage } from '@/utils/page'
@@ -102,28 +104,51 @@ const priceTabList = ref([
   {
     title: '300Spot',
     value: 300,
+    minPrice: 0,
+    maxPrice: 300,
   },
   {
     title: '500Spot',
     value: 500,
+    minPrice: 300,
+    maxPrice: 500,
   },
   {
     title: '1000Spot',
     value: 1000,
+    minPrice: 500,
+    maxPrice: 1000,
   },
   {
     title: '2000Spot',
     value: 2000,
+    minPrice: 1000,
+    maxPrice: 2000,
   },
 ])
 
 const dataList = ref<any>([])
 async function queryList(pageNo, pageSize) {
-  const data = { page: pageNo, size: pageSize }
-  const res = await getList(data)
+  // 获取当前选中tab的价格范围，默认为第一个tab (0-300)
+  const currentTab = priceTabList.value[priceTab.value] || priceTabList.value[0]
+  const minPrice = currentTab?.minPrice ?? 0
+  const maxPrice = currentTab?.maxPrice ?? 300
+
+  const params = {
+    page: pageNo,
+    size: pageSize,
+    minPrice,
+    maxPrice,
+  }
+  const res = await getList(params)
   paging.value.complete(res.data.list)
 }
 
+// 价格tab切换事件
+function onPriceTabChange() {
+  paging.value.reload()
+}
+
 onLoad(() => {
   getNewList()
 })
@@ -171,13 +196,13 @@ onLoad(() => {
         </scroll-view>
       </view>
       <view>
-        <wd-tabs v-model="priceTab" :line-width="0" :line-height="0">
+        <wd-tabs v-model="priceTab" :line-width="0" :line-height="0" @change="onPriceTabChange">
           <template v-for="item in priceTabList" :key="item">
             <wd-tab :title="item.title" />
           </template>
         </wd-tabs>
         <view class="grid grid-cols-2 gap-22rpx">
-          <product v-for="(item, index) in newProducts" :key="index" width="100%" :height="340" :item="item" @item-click="toPage('/pages/productDetail/productDetail', { id: item.id })" />
+          <product v-for="(item, index) in dataList" :key="index" width="100%" :height="340" :item="item" @item-click="toPage('/pages/productDetail/productDetail', { id: item.id })" />
         </view>
       </view>
     </view>