小程序-滚动触底-页面列表数据无限加载

// index/index.vue

<template>



<CustomNavbar />

<scroll-view @scrolltolower="onScrolltolower" scroll-y class="scroll-view">



<Guess ref="guessRef" />

</scroll-view>

</template>

<script>

// 滚动触底事件

const guessRef = ref<GuessInstance>()

const onScrolltolower = () => {

console.log('滚动到底部啦-guessRef', guessRef.value)

guessRef.value?.getMore()

}

</script>

// src/index/components/guess.vue

<script setup lang="ts">

import { getHomeGoodsGuessLikeAPI } from '@/services/home'

import type { PageParams } from '@/types/global'

import type { GuessItem } from '@/types/home'

import { onMounted, ref } from 'vue'

// 分页参数

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(pageParams)

// 数组追加

guessList.value.push(...res.result.items)

// 分页条件

if (pageParams.page < res.result.pages) {

// 页码累加

pageParams.page++

} else {

finish.value = true

}

}

// 组件挂载完毕

onMounted(() => {

getHomeGoodsGuessLikeData()

})

// 暴露方法

defineExpose({

getMore: getHomeGoodsGuessLikeData,

})

</script>

<template>



<view class="caption">

<text class="text">猜你喜欢</text>

</view>

<view class="guess">

<navigator

class="guess-item"

v-for="item in guessList"

:key="item.id"

:url="`/pages/goods/goods`"

>

<image class="image" mode="aspectFill" :src="item.picture"></image>

<view class="name"> {{ item.name }} </view>

<view class="price">

<text class="small">¥</text>

<text>{{ item.price }}</text>

</view>

</navigator>

</view>

<view class="loading-text">

{{ finish ? '亲，我也是有底线的哦~' : '正在加载...' }}

</view>

</template>

效果图：看浏览器 network 面板的接口调用情况

滚动到底部，无数据