猜你喜欢滑动分页

src/components/XtxGuess.vue

@@ -18,26 +18,58 @@
       </view>
     </navigator>
   </view>
-  <view class="loading-text"> 正在加载... </view>
+  <view class="loading-text">
+    {{ finish ? '没有更多数据~' : '正在加载...' }}
+  </view>
 </template>
 
 <script setup lang="ts">
 import type { GuessItem } from '@/types/home'
 import { getHomeGoodsGuessLikeAPI } from '@/services/home'
 import { onMounted, ref } from 'vue'
+import type { PageParams } from '@/types/global'
+
+// 分页参数
+const pageParams: Required<PageParams> = {
+  page: 1,
+  pageSize: 10,
+}
+
 // 猜你喜欢的列表
 const guessList = ref<GuessItem[]>([])
 
+// 已结束标记
+const finish = ref(false)
+
 // 获取猜你喜欢数据
 const getHomeGoodsGuessLikeData = async () => {
+  // 退出分页判断
+  if (finish.value === true) {
+    return uni.showToast({ icon: 'none', title: '没有更多数据~' })
+  }
+
   const res = await getHomeGoodsGuessLikeAPI()
-  guessList.value = res.result.items
+  // guessList.value = res.result.items
+  // 数组追加
+  guessList.value.push(...res.result.items)
+  // 分页条件
+  if (pageParams.page < res.result.pages) {
+    // 页码累加
+    pageParams.page++
+  } else {
+    finish.value = true
+  }
 }
 
 // 组件挂载完毕
 onMounted(() => {
   getHomeGoodsGuessLikeData()
 })
+
+// 暴露方法
+defineExpose({
+  getMore: getHomeGoodsGuessLikeData,
+})
 </script>
 
 <style lang="scss">

src/pages/index/index.vue

@@ -2,7 +2,7 @@
   <view class="viewport">
     <!-- 自定义导航栏 -->
     <CustomNavbar />
-    <scroll-view class="scroll-view" scroll-y>
+    <scroll-view @scrolltolower="onScrolltolower" class="scroll-view" scroll-y>
       <PageSkeleton v-if="isLoading" />
       <!-- 自定义轮播图 -->
       <XtxSwiper :list="bannerList" />
@@ -11,7 +11,7 @@
       <!-- 热门推荐 -->
       <HotPanel :list="hotList" />
       <!-- 猜你喜欢 -->
-      <XtxGuess />
+      <XtxGuess ref="guessRef" />
     </scroll-view>
   </view>
 </template>
@@ -24,6 +24,7 @@ import { ref } from 'vue'
 import { onLoad } from '@dcloudio/uni-app'
 import { getHomeBannerAPI, getHomeCategoryAPI, getHomeHotAPI } from '@/services/home'
 import type { BannerItem, CategoryItem, HotItem } from '@/types/home'
+import type { XtxGuessInstance } from '@/types/component'
 
 // 获取轮播图数据
 const bannerList = ref<BannerItem[]>([])
@@ -49,6 +50,14 @@ const getHomeHotData = async () => {
 // 是否加载中标记
 const isLoading = ref(false)
 
+// 获取猜你喜欢组件实例
+const guessRef = ref<XtxGuessInstance>()
+
+// 滚动触底事件
+const onScrolltolower = () => {
+  guessRef.value?.getMore()
+}
+
 // 页面加载
 onLoad(async () => {
   isLoading.value = true

src/types/component.d.ts

@@ -3,6 +3,7 @@
  *   现调整为
  * declare module 'vue'
  */
+import type { type } from 'os'
 import 'vue'
 declare module 'vue' {
   export interface GlobalComponents {
@@ -10,3 +11,5 @@ declare module 'vue' {
     XtxGuess: typeof XtxGuess
   }
 }
+
+export type XtxGuessInstance = InstanceType<typeof XtxGuess>

src/types/global.d.ts

@@ -11,3 +11,11 @@ export type PageResult<T> = {
   /** 每页条数 */
   pageSize: number
 }
+
+/** 通用分页参数类型 */
+export type PageParams = {
+  /** 页码：默认值为 1 */
+  page?: number
+  /** 页大小：默认值为 10 */
+  pageSize?: number
+}