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

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

滚动到底部,无数据

相关推荐
2501_9159090619 小时前
苹果上架App软件全流程指南:iOS 应用发布步骤、App Store 上架流程、uni-app 打包上传与审核技巧详解
android·ios·小程序·https·uni-app·iphone·webview
2501_9159214319 小时前
iOS 文件管理与能耗调试结合实战 如何查看缓存文件、优化电池消耗、分析App使用记录(uni-app开发与性能优化必备指南)
android·ios·缓存·小程序·uni-app·iphone·webview
2501_9159184119 小时前
App 苹果 上架全流程解析 iOS 应用发布步骤、App Store 上架流程
android·ios·小程序·https·uni-app·iphone·webview
2501_9160074720 小时前
苹果上架全流程详解,iOS 应用发布步骤、App Store 上架流程、uni-app 打包上传与审核要点完整指南
android·ios·小程序·https·uni-app·iphone·webview
ZZHow102420 小时前
微信小程序开发笔记(01_小程序基础与配置文件)
笔记·微信小程序·小程序
皮皮冰燃21 小时前
微信小程序-1-微信开发者工具环境搭建和初始化创建项目
微信小程序·小程序
jingling55521 小时前
uniapp | 实现微信小程序端的分包处理
微信小程序·小程序·uni-app
2501_9159214321 小时前
iOS App 性能监控与优化实战 如何监控CPU、GPU、内存、帧率、耗电情况并提升用户体验(uni-app iOS开发调试必备指南)
android·ios·小程序·uni-app·iphone·webview·ux
2501_915921431 天前
前端开发工具有哪些?常用前端开发工具、前端调试工具、前端构建工具与效率提升工具对比与最佳实践
android·前端·ios·小程序·uni-app·iphone·webview
说私域1 天前
基于开源AI智能名片、链动2+1模式与S2B2C商城小程序的流量运营与个人IP构建研究
人工智能·小程序·流量运营