一、概述
上一篇文章，已经实现了商品列表组件封装以及使用。
但是商品列表页面，还需要实现，上下拉动，动态加载数据。
效果如下：
二、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>
代码解释：
在onPullDownRefresh里面，定义了一个延迟执行代码的函数，1秒后，执行get_goods方法，执行成功后，再执行uni.stopPullDownRefresh()，用来关闭转圈的图标。
在get_goods里面，定义了一个callBack，这里面做了一个if判断。
当onLoad(){}里面执行get_goods方法时，直接跳过if判断。但是当onPullDownRefresh里面的延迟执行函数，执行get_goods，就会调用callBack，用来刷新结束通知
重新编译代码，效果如下：