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) +}