实现上拉加载更多

打开项目根目录中的 pages.json 配置文件，为 subPackages 分包中的商品 goods_list 页面配置上拉触底的距离：

"subPackages": [{"root": "subpkg","pages": [{"path": "goods_detail/goods_detail","style": {}},{"path": "goods_list/goods_list","style": {"onReachBottomDistance": 150}},{"path": "search/search","style": {}}]}]

在 goods_list 页面中，和 methods 节点平级，声明 onReachBottom 事件处理函数，用来监听页面的上拉触底行为：

// 触底的事件
onReachBottom() {// 让页码值自增 +1this.queryObj.pagenum += 1// 重新获取列表数据this.getGoodsList()
}

改造 methods 中的 getGoodsList 函数，当列表数据请求成功之后，进行新旧数据的拼接处理：

// 获取商品列表数据的方法
async getGoodsList() {// 发起请求const { data: res } = await uni.$http.get('/api/public/v1/goods/search', this.queryObj)if (res.meta.status !== 200) return uni.$showMsg()// 为数据赋值：通过展开运算符的形式，进行新旧数据的拼接this.goodsList = [...this.goodsList, ...res.message.goods]this.total = res.message.total
}

优化：

通过节流阀防止发起额外的请求

在 data 中定义 isloading 节流阀如下：

data() {return {// 是否正在请求数据isloading: false}
}

修改 getGoodsList 方法，在请求数据前后，分别打开和关闭节流阀：

// 获取商品列表数据的方法
async getGoodsList() {// ** 打开节流阀this.isloading = true// 发起请求const { data: res } = await uni.$http.get('/api/public/v1/goods/search', this.queryObj)// ** 关闭节流阀this.isloading = false// 省略其它代码...
}

在 onReachBottom 触底事件处理函数中，根据节流阀的状态，来决定是否发起请求：

// 触底的事件
onReachBottom() {// 判断是否正在请求其它数据，如果是，则不发起额外的请求if (this.isloading) returnthis.queryObj.pagenum += 1this.getGoodsList()
}

判断数据是否加载完毕

如果下面的公式成立，则证明没有下一页数据了：

当前的页码值 * 每页显示多少条数据 >= 总数条数
pagenum * pagesize >= total

修改 onReachBottom 事件处理函数如下：

// 触底的事件
onReachBottom() {// 判断是否还有下一页数据if (this.queryObj.pagenum * this.queryObj.pagesize >= this.total) return uni.$showMsg('数据加载完毕！')// 判断是否正在请求其它数据，如果是，则不发起额外的请求if (this.isloading) returnthis.queryObj.pagenum += 1this.getGoodsList()
}

下一篇：uni-app 数据下拉刷新功能https://blog.csdn.net/SmartJunTao/article/details/123684580

uni-app 数据上拉加载更多功能相关推荐

android中如何实现上拉加载更多功能（建议收藏）
上拉加载更多功能实际上就是给RecyclerView增加一个FooterView,然后通过判断是否滑动到了最后一条Item,来控制FooterView的显示和隐藏,接下来我们来看下如何实现: 一.给A ...
Flutter listview下拉刷新上拉加载更多功能实现
下拉刷新在Flutter中系统已经为我们提供了google material design的刷新功能 , 样式与原生Android一样. 我们可以使用RefreshIndicator组件来实现Flu ...
java h5 上拉加载更多_移动端H5页面上拉加载更多功能实现（二）
之前已经写过一篇关于上拉加载更多的文章,那个主要是根据滚动实现分页向后台发起请求实现.这次实现方式为后台返回所有需要加载的数据,前端这边做视觉上的分页效果.实现原理也是根据滚动距离触发加载更多的条件. ...
Android——RecyclerView自定义OnScrollListener实现下拉刷新监听，上拉加载更多功能
目录 [前言] 1.OnScrollListener滑动事件监听抽象类 2.利用onScrollStateChanged及onScrolled方法实现下拉刷新及上拉加载更多
给SwipeRefreshLayout添加上拉加载更多功能
下拉刷新,滑动到底部加载更多是App中很常见的功能,github上也有很多这样的开源库提供这样的功能,但大多数是在listview,recycleview等列表类上面做了一层包装,后来google推出 ...
原生JS实现上拉加载更多功能
//获取滚动条当前的位置, 就是距离页面顶部的距离function getScrollTop() {var scrollTop = 0;if(document.documentElement & ...
android listview下拉刷新动画,android 安卓 listview 支持下拉刷新上拉加载更多
[1]重写listViewimport java.text.SimpleDateFormat; import java.util.Date; import com.example.testdddlea ...
下拉刷新及上拉加载更多的ListView
PullToRefreshListView 自定义ListView 带简洁的下拉刷新及上拉加载更多功能 PullToRefreshListView 实现过程使用方法 GIF效果结束语实现过程继 ...
android官方上拉加载,Android-RecycleView上拉加载更多
5.0之后推出的RecycleView来代替ListView,可以说RecycleView和ListView比起有过之而无不及,下面这篇博客主要来实现RecyclerView的上拉加载更多功能. 基 ...

uni-app 数据上拉加载更多功能

实现上拉加载更多

优化：

uni-app 数据上拉加载更多功能相关推荐

最新文章

热门文章