Vue uni-app框架实现上拉加载下拉刷新功能
实现上拉加载更多
打开项目根目录中的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() {
// 让页码值自增 +1
this.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) return
this.queryObj.pagenum += 1
this.getGoodsList()
}判断数据是否加载完毕
如果下面的公式成立，则证明没有下一页数据了：
当前的页码值 * 每页显示多少条数据 >= 总数条数
pagenum * pagesize >= total
修改onReachBottom事件处理函数如下：
// 触底的事件
onReachBottom() {
// 判断是否还有下一页数据
if (this.queryObj.pagenum * this.queryObj.pagesize >= this.total) return uni.$showMsg('数据加载完毕！')
// 判断是否正在请求其它数据，如果是，则不发起额外的请求
if (this.isloading) return
this.queryObj.pagenum += 1
this.getGoodsList()
}实现下拉刷新
在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
}到此这篇关于Vue uni-app框架实现上拉加载下拉刷新功能的文章就介绍到这了,更多相关Vue uni-app内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
