uni-app x实现上下拉动，动态加载数据

news/2025/10/18 23:55:25/文章来源:https://www.cnblogs.com/xiao987334176/p/19147734

一、概述

上一篇文章，已经实现了商品列表组件封装以及使用。

但是商品列表页面，还需要实现，上下拉动，动态加载数据。

效果如下：

二、onReachBottom

onReachBottom是微信小程序页面生命周期中的回调函数，用于检测页面是否滚动到最底部，并在触底时触发加载更多内容。

修改 pages/goods/goods.uvue文件

在methods:{}下面，增加onReachBottom

onReachBottom() {uni.showToast({title: '到底啦，没有更多内容啦'});
}

编译代码，重新运行，直接拉到最下面，就会出现提示，效果如下：

三、滑动加载

修改 pages/goods/goods.uvue文件，增加分页判断

完整代码如下：

<template><view class="goods_list"><GoodsList :goods="goods"></GoodsList><view class="is_over" v-if="flag">---我是有底线的---</view></view>
</template><script>import GoodsList from '../../components/goods-list/goods-list.uvue'export default {components: {GoodsList: GoodsList},data() {return {goods: [],pageindex: 1,flag: false}},onLoad() {this.get_goods()},methods: {// 获取商品列表数据
            async get_goods() {try {const res = await this.$http.get('/api/getgoods?pageindex=' + this.pageindex, {})// console.log("res", res)// this.goods = res.messagethis.goods = [...this.goods, ...res.message]} catch (err : any) {uni.showToast({title: '获取商品列表失败' + err.statusCode,});}},},onReachBottom() {// 判断最后一页if (this.goods.length < this.pageindex * 10) {this.flag = true// uni.showToast({//     title: '到底啦，没有更多内容啦'// });return false} else {// 获取下一页数据this.pageindex++this.get_goods()}}}
</script><style lang="scss">.goods_list {background: #eee;}.is_over {width: 100%;height: 50px;line-height: 50px;text-align: center;font-size: 28rpx;}
</style>

代码说明：

<template>，新增了一个view，用来提醒用户，到底了，已经是显示最后一页。

this.goods = [...this.goods, ...res.message]，把已有的 this.goods 数组和 res.message 数组合并成一个新的数组，然后重新赋值给 this.goods

什么意思呢，就是第1页时，this.goods有10条数据，第2页时，this.goods有20条数据，依次类推。

this.goods.length < this.pageindex * 10，这个判断条件，需要重点讲一下，有点不太好理解。

就如上面所说，每次滑动，分页数会一直加。那么this.goods的数据量就会变成，10，20，30等等。

但是到了最后一页呢，可能是43，51，69这种，非10整除的数量。

那么，当数据量，不能被10整除时，也就是到了最后一页了。所以判断条件这里，用的是this.goods.length < this.pageindex * 10

编译代码，效果如下：

四、下拉刷新

onPullDownRefresh

onPullDownRefresh 是微信小程序和 uni-app中实现下拉刷新的页面事件处理函数，用于监听用户下拉操作并触发数据刷新逻辑。

基础配置

1. 开启下拉刷新‌：在页面配置文件pages.json中添加 "enablePullDownRefresh":true

修改pages.json，只需要修改goods的配置

{"path": "pages/goods/goods","style": {"navigationBarTitleText": "商品列表","enablePullDownRefresh": true}
},

2‌.处理函数定义‌：在页面逻辑层（如 Page 对象中）定义 onPullDownRefresh 函数，实现刷新逻辑。 ‌

修改 pages/goods/goods.uvue文件，在onReachBottom(){}，下面新增一个函数

onPullDownRefresh() {console.log("下拉刷新了")this.pageindex = 1this.goods = []this.flag = falsethis.get_goods()
}

编译代码，重新运行。

从商品列表，向下拉，就会出现一个转圈的图标

但是有一个问题，这个转圈的图标，一直无法消失。

还需要调用uni.stopPullDownRefresh()，来处理图标，不显示。

那么什么时候调用呢？当然是调用api接口成功了，再调用。

再次修改 pages/goods/goods.uvue文件

完整代码如下：

<template><view class="goods_list"><GoodsList :goods="goods"></GoodsList><view class="is_over" v-if="flag">---我是有底线的---</view></view>
</template><script>import GoodsList from '../../components/goods-list/goods-list.uvue'export default {components: {GoodsList: GoodsList},data() {return {goods: [],pageindex: 1,flag: false}},onLoad() {this.get_goods()},methods: {// 获取商品列表数据
            async get_goods(callBack) {try {const res = await this.$http.get('/api/getgoods?pageindex=' + this.pageindex, {})// console.log("res", res)// this.goods = res.messagethis.goods = [...this.goods, ...res.message]// callBack && callBack()if (callBack) {callBack();}} catch (err : any) {uni.showToast({title: '获取商品列表失败' + err.statusCode,});}},},onReachBottom() {// 判断最后一页if (this.goods.length < this.pageindex * 10) {this.flag = true// uni.showToast({//     title: '到底啦，没有更多内容啦'// });return false} else {// 获取下一页数据this.pageindex++this.get_goods()}},onPullDownRefresh() {console.log("下拉刷新了")this.pageindex = 1this.goods = []this.flag = falsesetTimeout(() => {this.get_goods(() => {uni.stopPullDownRefresh()})}, 1000)}}
</script><style lang="scss">.goods_list {background: #eee;}.is_over {width: 100%;height: 50px;line-height: 50px;text-align: center;font-size: 28rpx;}
</style>