diff --git a/src/pages/hot/hot.vue b/src/pages/hot/hot.vue
index 3eb3df5..d86dd2a 100644
--- a/src/pages/hot/hot.vue
+++ b/src/pages/hot/hot.vue
@@ -20,6 +20,7 @@
v-for="(item, index) in subTypes"
:key="item.id"
v-show="activeIndex === index"
+ @scrolltolower="onScrolltolower"
scroll-y
class="scroll-view"
>
@@ -38,7 +39,9 @@
- 正在加载...
+
+ {{ item.finish ? '没有更多数据了~' : '正在加载...' }}
+
@@ -72,14 +75,18 @@ uni.setNavigationBarTitle({ title: currUrlMap!.title })
const bannerPicture = ref('')
// 推荐选项
-const subTypes = ref([])
+const subTypes = ref<(SubTypeItem & { finish?: boolean })[]>([])
// 高亮的下标
const activeIndex = ref(0)
// 获取热门推荐数据
const getHotRecommendData = async () => {
- const res = await getHotRecommendAPI(currUrlMap!.url)
+ const res = await getHotRecommendAPI(currUrlMap!.url, {
+ // 技巧:环境变量,开发环境,修改初始页面方便测试分页结束
+ page: import.meta.env.DEV ? 30 : 1,
+ pageSize: 10,
+ })
bannerPicture.value = res.result.bannerPicture
subTypes.value = res.result.subTypes
}
@@ -88,6 +95,33 @@ const getHotRecommendData = async () => {
onLoad(() => {
getHotRecommendData()
})
+
+// 滚动触底
+const onScrolltolower = async () => {
+ // 获取当前选项
+ const currsubTypes = subTypes.value[activeIndex.value]
+ // 分页条件
+ if (currsubTypes.goodsItems.page < currsubTypes.goodsItems.pages) {
+ // 当前页码累加
+ currsubTypes.goodsItems.page++
+ } else {
+ // 标记已结束
+ currsubTypes.finish = true
+ // 退出并轻提示
+ return uni.showToast({ icon: 'none', title: '没有更多数据了~' })
+ }
+
+ // 调用API传参
+ const res = await getHotRecommendAPI(currUrlMap!.url, {
+ subType: currsubTypes.id,
+ page: currsubTypes.goodsItems.page,
+ pageSize: currsubTypes.goodsItems.pageSize,
+ })
+ // 新的列表选项
+ const newsubTypes = res.result.subTypes[activeIndex.value]
+ // 数组追加
+ currsubTypes.goodsItems.items.push(...newsubTypes.goodsItems.items)
+}