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

// 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 面板的接口调用情况

滚动到底部,无数据

相关推荐
丁总学Java4 小时前
微信小程序,点击bindtap事件后,没有跳转到详情页,有可能是app.json中没有正确配置页面路径
微信小程序·小程序·json
说私域5 小时前
基于开源 AI 智能名片、S2B2C 商城小程序的用户获取成本优化分析
人工智能·小程序
mosen8685 小时前
Uniapp去除顶部导航栏-小程序、H5、APP适用
vue.js·微信小程序·小程序·uni-app·uniapp
qq22951165026 小时前
微信小程序的汽车维修预约管理系统
微信小程序·小程序·汽车
尚梦13 小时前
uni-app 封装刘海状态栏(适用小程序, h5, 头条小程序)
前端·小程序·uni-app
paopaokaka_luck17 小时前
基于Spring Boot+Vue的助农销售平台(协同过滤算法、限流算法、支付宝沙盒支付、实时聊天、图形化分析)
java·spring boot·小程序·毕业设计·mybatis·1024程序员节
Bessie23419 小时前
微信小程序eval无法使用的替代方案
微信小程序·小程序·uni-app
蜕变菜鸟19 小时前
小程序跳转另一个小程序
小程序
1 天前
躺平成长-代码开发,利用kimi开发小程序(09)
小程序
1 天前
微信小程序运营日记(第四天)
微信小程序·小程序