在uni-app小程序中，可以使用onReachBottom和onPullDownRefresh两个API来实现商品列表页的上拉加载更多数据和下拉刷新数据的功能。
首先，在pages.json文件中，需要配置以下相关属性：
{
"path": "pages/list/list",
"style": {
// 导航栏标题
"navigationBarTitleText": "商品列表",
// 允许开启下拉刷新
"enablePullDownRefresh": true,
// 滚动条距离底部100px时触发加载
"onReachBottomDistance": 100
}
}
path：商品列表页的路径；style.navigationBarTitleText：商品列表页的导航栏标题；onReachBottomDistance：触发上拉加载更多数据的距离，单位为px；enablePullDownRefresh：是否开启下拉刷新功能。
接下来，在商品列表页的vue文件中，可以使用onReachBottom和onPullDownRefresh两个API来实现上拉加载更多数据和下拉刷新数据的功能。
<template>
<scroll-view class="product-list" :scroll-y="true" ref="scrollView">
<view v-for="(item, index) in productList" :key="index">{{ item }}</view>
</scroll-view>
</template>
<script>
export default {
data() {
return {
query:'' // 对应搜索出商品列表的关键字，从搜索页跳转来时传过来
productList: [], // 商品列表数据
currentPage: 1, // 当前页码
pageSize: 10, // 每页数据数量
isLoading: false, // 是否正在发送请求
isFinished: false, // 判断数据源是否加载完毕
total: 0, // 数据总条数
// 有些商品暂时没有图片，所以要设置默认图片来代替
defaultImage:"默认图片的地址" // 设置默认图片
}
},
onLoad({ key }) {
// 接收"回车搜索"或"点击搜索按钮"跳转到商品页面时传入的关键字
this.query = key
// 初始化加载数据
this.loadData();
},
methods: {
// 获取商品列表数据
async loadData() {
// 判断数据源是否加载完毕
// 如 isFinished 为true 就是在加载中，直接 return 并提示
if (this.isFinished) return uni.$showMsg('没有更多数据了！')
// 用布尔值变量isLoading判断是否正在发送请求，
// 为true就是在加载中，此时直接retun
if (this.isLoading) return
// 开始加载，将网络请求状态设置 为true
this.isLoading = true
const { message } = await uni.$http.get('/goods/search', {
query: this.query,
pagenum: this.currentPage,
pagesize: this.pageSize
})
// 当列表数据请求成功之后，进行新旧数据的拼接处理
this.productList = [...this.productList, ...message.goods]
this.total = message.total
// 再将网络状态设置为 false
this.isLoading = false
// 通过列表数组长度和数据总条数 判断数据源是否加载完毕
if (this.productList.length === this.total) {
this.isFinished = true
}
}
},
// 上拉加载更多数据，当前页码要 ++
async loadMoreData() {
this.currentPage++;
// 请求下一页的数据
await this.loadData();
},
// 下拉刷新数据 将原有的数据全部清除
async refreshData() {
this.total = 0
this.isLoading = false
this.isFinished = false
this.productList = [];
this.currentPage = 1;
// 重新发送请求
await this.loadData();
}
},
onReachBottom() {
// 上拉触底，加载更多数据
this.loadMoreData();
},
async onPullDownRefresh() {
// 下拉刷新，刷新数据
await this.refreshData();
// 数据一请求出来就关闭加载动画
uni.stopPullDownRefresh(); // 停止下拉刷新动画
}
}
</script>
<style>
.product-list {
height: 100vh;
}
</style>
商品列表 - 通过节流阀防止发起额外的请求
- 如果网络环境不好，将来请求数据时，会很慢
- 用户可以会在这个期间，反复下拉，重复发送请求
- 我们应该在数据没有响应回来之前，不允许再次发送请求
- 所以在
data中定义isloading节流阀来处理
在这个示例中，我们在商品列表页的vue文件中，通过onReachBottom和onPullDownRefresh两个API来实现上拉加载更多数据和下拉刷新数据的功能。
在onLoad方法中，使用async和await关键字来异步获取数据，确保数据加载完成后再进行后续操作。
loadData方法使用await关键字来等待异步请求获取数据的完成，然后将返回的数据追加到productList数组中。
loadMoreData方法和refreshData方法也使用await关键字来等待数据加载完成。
在onReachBottom方法中，调用loadMoreData方法加载更多数据。
在onPullDownRefresh方法中，调用refreshData方法刷新数据，并使用uni.stopPullDownRefresh()方法停止下拉刷新动画。
需要注意的是，onReachBottom和onPullDownRefresh方法是uni-app框架提供的页面生命周期钩子函数
