From 2251e22f42b3aef660a6cee1e65044d4e9091fcd Mon Sep 17 00:00:00 2001 From: liruiqiang <3151805288@qq.com> Date: Sat, 16 Aug 2025 18:00:22 +0800 Subject: [PATCH] =?UTF-8?q?=E7=83=AD=E9=97=A8=E6=8E=A8=E8=8D=90=E6=BB=91?= =?UTF-8?q?=E5=8A=A8=E5=88=86=E9=A1=B5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/hot/hot.vue | 40 +++++++++++++++++++++++++++++++++++++--- 1 file changed, 37 insertions(+), 3 deletions(-) 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) +}