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

这篇具有很好参考价值的文章主要介绍了uniapp使用自带【刷新方法】与使用【scroll-view】实现下拉刷新上拉加载。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

前言：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必须设置一个高度

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

代码：文章来源地址https://www.toymoban.com/news/detail-505532.html

<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"
		}
	}
}

到了这里，关于uniapp使用自带【刷新方法】与使用【scroll-view】实现下拉刷新上拉加载的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！