uniapp使用自带【刷新方法】与使用【scroll-view】实现下拉刷新上拉加载

前言：uniapp自带下拉刷新，上拉加载功能基本可以满足刷新需求，但是顶部有状态栏的页面就得进行特殊处理，使用scroll-view解决，状态栏会连带被下拉问题

1、uniapp自带下拉刷新、上拉加载

在page.json中对应页面路由设置【enablePullDownRefresh】值为true（开启下拉刷新）

代码：

//下拉刷新触发方法(和onLoad同级)onPullDownRefresh () {this.params.pageNum = 1this.PostCollectList()//获取数据},//上拉加载触发方法onReachBottom() {if(this.hasNextPage){//判断是否还有数据需要加载this.params.pageNum = this.params.pageNum+1this.loading.status = "loadingText"this.PostCollectList()//获取数据}else{this.loading.status = "nomoreText"}},onLoad() {},methods: {PostCollectList() {let params = {...this.params}PostCollectList(params).then(res => {let data = res.data.data || []this.list = this.list.concat(data)this.total = res.data.totalthis.hasNextPage = res.data.hasNextPageuni.stopPullDownRefresh()//结束下拉刷新if(this.hasNextPage){this.loading.status = "loadmoreText"}else{this.loading.status = "nomoreText"}})},}

2、使用scroll-view实现刷新，官网地址：scroll-view | 微信开放文档

需要注意：

官网中方法有带【bind】,使用@的话需要将bing去掉（@refresherpulling=”refresherpulling”）或者（bindrefresherpulling=”bindrefresherpulling”）

使用scroll-view必须设置一个高度

代码：

//需要滚动的内容data() {return {isRefresher: false, //下拉刷新状态}},methods: {//请求数据PostCollectList() {//数据请求返回后从设刷新状态值this.isRefresher= true},// 下拉刷新被触发refresherrefreshFun() {this.list = []this.params.pageNum = 1this.PostCollectList()},// 下拉刷新触发refresherpullingFun() {this.isRefresher= true},//上拉加载，页面滑动到底部加载分页数据scrolltolowerFun() {if(this.hasNextPage){this.params.pageNum = this.params.pageNum+1this.loading.status = "loadingText"this.PostCollectList()}else{this.loading.status = "nomoreText"}}}