这篇文章主要介绍“uni-app如何实现数据下拉刷新功能”，在日常操作中，相信很多人在uni-app如何实现数据下拉刷新功能问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”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.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如何实现数据下拉刷新功能”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注亿速云网站，小编会继续努力为大家带来更多实用的文章！
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
