uniapp 上拉加载下拉刷新_上拉加载下拉加载_通过结合scroll-view实现上拉加载下拉刷新

scroll-y="true" // 允许纵向滚动

:style="'height:'+clentHeight+'px;'" // 计算行高

@refresherpulling // 自定义下拉刷新控件被下拉

:refresher-threshold="0" // 设置自定义下拉刷新阈值

@refresherrefresh // 自定义下拉刷新被触发

:refresher-triggered="isRefresher" // 设置当前下拉刷新状态，true 表示下拉刷新已经被触发，false 表示下拉刷新未被触发

@scrolltolower // 滚动到底部/右边，会触发 scrolltolower 事件

refresher-enabled="true" // 开启自定义下拉刷新

refresher-background="#161618" // 设置自定义下拉刷新区域背景颜色

refresher-default-style="none" // 设置自定义下拉刷新默认样式，支持设置 black，white，none，none 表示不使用默认样式

<scroll-view scroll-y="true" style="height:86vh;" 
	:refresher-threshold="0"
	@refresherrefresh="refresherrefreshFun"
	@refresherpulling="refresherpullingFun"
	:refresher-triggered="isRefresher"
	@scrolltolower="scrolltolowerFun"
	refresher-enabled="true"
	refresher-background="#161618"
	refresher-default-style="none">
	<view class="flex-center" v-show="loadingStatus">
		<u-loading-icon text="加载中" textColor="#fff" color="#0952a2" textSize="14" size="14"></u-loading-icon>
	</view>
		<UserInfoList :list="userList"></UserInfoList>
</scroll-view>

自定义下拉刷新的样式

<view class="flex-center" v-show="loadingStatus">
								<u-loading-icon text="加载中" textColor="#fff" color="#0952a2" textSize="14" size="14"></u-loading-icon>
</view>

 

计算行高通过createSelectorQuery

selectorQuery.select(selector)在当前页面下选择第一个匹配选择器 selector 的节点，返回一个 NodesRef 对象实例，可以用于获取节点信息

onReady() {
	let view = uni.createSelectorQuery().select(".home-data");
	view.boundingClientRect(data => {
		this.clentHeight = data.height
	}).exec();
},

下拉刷新,上拉加载的触发方法

refresherrefreshFun() {
	this.params.pageNum = 1
	    this.getUserList()
			},
			// 下拉刷新触发
			refresherpullingFun() {
				this.isRefresher = true
				this.loadingStatus = true
			},
			//上拉加载，页面滑动到底部加载分页数据
			scrolltolowerFun() {
				uni.showLoading({
					title: '加载中'
				});
				if (this.total <= this.userList.length) {
					uni.hideLoading();
					uni.showToast({
						title: '没有更多了',
						duration: 2000,
						icon: 'none'
					});
					return
				}
				this.params.pageNum = this.params.pageNum + 1
				this.getUserList()
			}

获取列表数据需要传入参数当前页，每页的条数，这里用的是pageNum和pageSize。使用时根据后端数据来。

//获取推荐用户列表
			getUserList() {
				uni.request({
					url:'' ,//真实的接口地址
					data:{
						pageSize: 10, //每页的条数
						pageNum: 1, //当前页
					},
					method:'GET', //请求方式
					success: (res) => {
						this.userList = res.rows
					this.total = res.total

					if (res.rows && res.rows.length !== 0 && res.rows.length >= res.total) {
						//数据请求返回后从设刷新状态值
						this.isRefresher = false
						this.loadingStatus = false
						return
					}
					}
				})
			},

完整代码如下：

<template>
<view class="home-data">
						<scroll-view scroll-y="true" 
                            :style="'height:'+clentHeight+'px;'"  
							:refresher-threshold="0"
							@refresherrefresh="refresherrefreshFun"
							@refresherpulling="refresherpullingFun"
							:refresher-triggered="isRefresher"
							@scrolltolower="scrolltolowerFun"
							refresher-enabled="true"
							refresher-background="#161618"
							refresher-default-style="none">
							<view class="flex-center" v-show="loadingStatus">
								<u-loading-icon text="加载中" textColor="#fff" color="#0952a2" textSize="14" size="14"></u-loading-icon>
							</view>
							<UserInfoList :list="userList"></UserInfoList>
						</scroll-view>
					</view>
</template>

<script>
    export default {
        data(){
            return{
                isRefresher: false, //下拉刷新状态
				loadingStatus: false,
                
				total: 0,
				userList: [],
            }
        },
        onLoad() {
			this.getUserList()
		},
		onReady() {
			let view = uni.createSelectorQuery().select(".home-data");
			view.boundingClientRect(data => {
				this.clentHeight = data.height
			}).exec();
		},
        methods:{
            getUserList() {
				uni.request({
					url:'' ,//真实的接口地址
					data:{
						pageSize: 10, //每页的条数
						pageNum: 1, //当前页
					},
					method:'GET', //请求方式
					success: (res) => {
						this.userList = res.rows
					this.total = res.total

					if (res.rows && res.rows.length !== 0 && res.rows.length >= res.total) {
						//数据请求返回后从设刷新状态值
						this.isRefresher = false
						this.loadingStatus = false
						return
					}
					}
				})
			},
            // 下拉刷新被触发
			refresherrefreshFun() {
				this.params.pageNum = 1
				this.getUserList()
			},
			// 下拉刷新触发
			refresherpullingFun() {
				this.isRefresher = true
				this.loadingStatus = true
			},
			//上拉加载，页面滑动到底部加载分页数据
			scrolltolowerFun() {
				uni.showLoading({
					title: '加载中'
				});
				if (this.total <= this.userList.length) {
					uni.hideLoading();
					uni.showToast({
						title: '没有更多了',
						duration: 2000,
						icon: 'none'
					});
					return
				}
				this.params.pageNum = this.params.pageNum + 1
				this.getUserList()
			}
        }
    }
</script>