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

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

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

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

代码：

//下拉刷新触发方法(和onLoad同级)
onPullDownRefresh () {
    this.params.pageNum = 1
    this.PostCollectList()  //获取数据
},
//上拉加载触发方法
onReachBottom() {
    if(this.hasNextPage){    //判断是否还有数据需要加载
        this.params.pageNum = this.params.pageNum+1
        this.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.total
            this.hasNextPage = res.data.hasNextPage
            uni.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必须设置一个高度

代码：

<template>
    <view>
        <scroll-view 
            scroll-y="true"    //设置纵向滚动
            :style="{height: scprllHeight + 'rpx'}"     //设置高度
            :refresher-threshold="100"    //设置下拉范围
            @refresherrefresh="refresherrefreshFun"     //下拉刷新被触发
            @refresherpulling="refresherpullingFun"      //正在下拉执行刷新操作   
            :refresher-triggered="isRefresher"        //设置是否刷新变量
            @scrolltolower="scrolltolowerFun"    //滑动底部触发事件
            refresher-enabled="true"             //开启自定义下拉刷新
            refresher-default-style="none">
            <view class="content-box">
                //需要滚动的内容
            </view>
        </scroll-view>
    </view>
</template>

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