作者:我只是狼却有幅羊的心肠_152 | 来源:互联网 | 2023-05-17 12:41
很多列表页总数量很大,一次性查询加载会导致页面有很长时间的空白期,自然体验感极差,就会使用分页加载数据,这篇文章主要给大家介绍了关于uni-app实现数据下拉刷新功能实例的相关资料,需要的朋友可以参考下
目录
- uni-app数据下拉刷新
- 附:uni.startPullDownRefresh(OBJECT)
- 总结
uni-app上拉加载更多功能:https://www.jb51.net/article/257733.htm
uni-app数据下拉刷新
在 pages.json 配置文件中,为当前的 goods_list 页面单独开启下拉刷新效果:
"subPackages": [{
"root": "subpkg",
"pages": [{
"path": "goods_detail/goods_detail",
"style": {}
}, {
"path": "goods_list/goods_list",
"style": {
"onReachBottomDistance": 150,
"enablePullDownRefresh": true,
"backgroundColor": "#F8F8F8"
}
}, {
"path": "search/search",
"style": {}
}]
}]
监听页面的 onPullDownRefresh 事件处理函数:
// 下拉刷新的事件
onPullDownRefresh() {
// 1. 重置关键数据
this.queryObj.pagenum = 1
this.total = 0
this.isloading = false
this.goodsList = []
// 2. 重新发起请求
this.getGoodsList(() => uni.stopPullDownRefresh())
}
修改 getGoodsList 函数,接收 cb 回调函数并按需进行调用:
// 获取商品列表数据的方法
async getGoodsList(cb) {
this.isloading = true
const { data: res } = await uni.$http.get('/api/public/v1/goods/search', this.queryObj)
this.isloading = false
// 只要数据请求完毕,就立即按需调用 cb 回调函数
cb && cb()
if (res.meta.status !== 200) return uni.$showMsg()
this.goodsList = [...this.goodsList, ...res.message.goods]
this.total = res.message.total
}
uni-app上拉加载更多功能:https://www.jb51.net/article/257733.htm
附:uni.startPullDownRefresh(OBJECT)
通过 uni.startPullDownRefresh(OBJECT) 开始下拉刷新,调用后触发下拉刷新动画,效果与用户手动下拉刷新一致。
总结
到此这篇关于uni-app实现数据下拉刷新功能的文章就介绍到这了,更多相关uni-app数据下拉刷新内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持!