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

// 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_915918419 小时前
iOS 上架全流程指南 iOS 应用发布步骤、App Store 上架流程、uni-app 打包上传 ipa 与审核实战经验分享
android·ios·小程序·uni-app·cocoa·iphone·webview
00后程序员张11 小时前
iOS App 混淆与加固对比 源码混淆与ipa文件混淆的区别、iOS代码保护与应用安全场景最佳实践
android·安全·ios·小程序·uni-app·iphone·webview
破无差20 小时前
《赛事报名系统小程序》
小程序·html·uniapp
00后程序员张21 小时前
详细解析苹果iOS应用上架到App Store的完整步骤与指南
android·ios·小程序·https·uni-app·iphone·webview
海绵宝宝不喜欢侬1 天前
uniapp-微信小程序分享功能-onShareAppMessage
微信小程序·小程序·uni-app
2501_915106321 天前
Xcode 上传 ipa 全流程详解 App Store 上架流程、uni-app 生成 ipa 文件上传与审核指南
android·macos·ios·小程序·uni-app·iphone·xcode
亮子AI1 天前
【小程序】微信小程序隐私协议
微信小程序·小程序
weixin_177297220691 天前
短剧小程序系统开发:打造个性化娱乐新平台
小程序·娱乐·短剧
weixin_lynhgworld1 天前
剧本杀小程序系统开发:开启沉浸式社交娱乐新纪元
小程序·娱乐
~废弃回忆 �༄1 天前
mobx-miniprogram小程序的数据传输
小程序