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) 开始下拉刷新，调用后触发下拉刷新动画，效果与用户手动下拉刷新一致。
<template>
<view>
<view v-for="(item,index) of list" :key="index">
{{item}}
</view>
<button @click="pullDown">点击触发下拉刷新</button>
</view>
</template>
<script>
export default {
data() {
return {
list: [1, 2, 3, 4, 5]
}
},
methods: {
pullDown() {
//触发下拉刷新
uni.startPullDownRefresh()
}
},
onPullDownRefresh() {
console.log("触发下拉刷新")
setTimeout(() => {
this.list = [1, 2, 3, 5, 3, 2]
//关闭下拉刷新
uni.stopPullDownRefresh()
}, 2000)
}
}
</script>
<style>
</style>
总结
到此这篇关于uni-app实现数据下拉刷新功能的文章就介绍到这了,更多相关uni-app数据下拉刷新内容请搜索Devmax以前的文章或继续浏览下面的相关文章希望大家以后多多支持Devmax！