uni-app 上拉加载下拉刷新

使用uni-app开发list列表，实现上拉加载下拉刷新的功能。

list列表使用官方推荐的uni-list组件：

上拉加载使用的官方推荐的组件uni-load-more，并使用了页面生命周期中的onReachBottom（页面滚动到底部的事件）

下拉刷新使用了页面生命周期中的onPullDownRefresh，使用onPullDownRefresh时需要在pages.json中使用到下拉刷新的页面中配置一下，并重新运行，才能起作用。

                {
			"path": "pages/personnel/personnelList",
			"style": {
				"navigationBarTitleText": "人员管理",
				"enablePullDownRefresh":true,
				"app-plus": {
					"pullToRefresh": {
						"style": "circle",
						"offset": "88px"
					}
				}
			}
		},

注意：

1。使用onPullDownRefresh时需要在pages.json中使用到下拉刷新的页面中配置enablePullDownRefresh，并且需要重新运行才能起作用。

2。默认的下拉刷新的loading从标题栏上方开始显示，如果从标题栏下方显示，需要在pages.json中配置"offset": "88px"

具体代码：

<template>
	<view>
		<uni-nav-bar left-icon="back" title="人员管理" backgroundColor="#074498" color="white" fixed="true"
			statusBar='true' @clickLeft="goBack" @clickRight="searchPerson">
			<view slot="right" class="flex_vcenter">
				<image src="../../static/images/workbeach/icon_search.png" style="width: 25px; height: 25px;"></image>
			</view>
		</uni-nav-bar>
		<uni-list :border="false">
			<uni-list-item v-for="(item,index) in personList" :key="index" :border="false" direction="column" class="item" clickable @click="gotoDetail(item)">
				<template v-slot:header>
					<view class="common_color title_size">{{item.nickName}}</view>
					<view class="status_style" :class="item.status=='0'?'status_color_use':'status_color_forbidden'">{{item.status=='0'?'启用':'禁用'}}</view>
				</template>
				<template v-slot:body>
					<view class="divider"></view>
					<view class="flex_vcenter">
						<view class="item_content">
							<text class="item_text">员工编码：{{item.userCode}}</text>
							<text class="item_text">所属部门：{{item.deptName}}</text>
							<text class="item_text">职位：{{item.postNames}}</text>
							<text class="item_text">入职时间：{{item.employmentDate}}</text>
						</view>
						<image src="../../static/images/workbeach/arrow_right.png" class="arrow_right"></image>
					</view>
				</template>
			</uni-list-item>
		</uni-list>
		<uni-load-more :status="more" :contentText="contentText"></uni-load-more>
		<PopDialog ref='personDialog'></PopDialog>
	</view>
</template>

<script>
	import PopDialog from 'pages/personnel/PopDialog'
	import ApiService from './service.js'
	export default {
		components:{
			PopDialog
		},
		data() {
			return {
				personList:[],
				searchCondition:{},
				queryParams:'',
				more:'more',
				pageNum:1,
				pageSize:10,
				totalPage:0,
				contentText: {
					contentdown: '上拉加载更多',
					contentrefresh: '正在加载中',
					contentnomore: '没有更多数据了'
				},
				reLoad:false
			}
		},
		created() {
			this.getPersonelList();
			// this.getServerData()
			console.log('created');
		},
		mounted() {
			console.log('mounted');
		},
		onShow() {
			console.log('onShow');
		},
		onReachBottom() {
			console.log('onReachBottom');
			if(this.more != 'noMore') {
				this.more = 'more';
				this.getPersonelList();
			}
		},
		onPullDownRefresh() {
			console.log('onPullDownRefresh');
			this.reLoad = true;
			this.pageNum = 1;
			this.getPersonelList();
		},
		methods:{
			goBack() {
				uni.navigateBack();//跳转到上一个页面
			},
			searchPerson() {
				let _self = this;
				let uniPop = this.$refs.personDialog
				uniPop.show('查询条件',{
				    btns: [
				        {
				            text: '重置',
				            style: 'color: #ffffff',
				            onTap() {
				                uniPop.close();
				            }
				        },
				        {
				            text: '确定',
				            style: 'color: #ffffff',
				            onTap(data) {
				                console.log('您点击了前往设置！'+JSON.stringify(data));
								_self.searchCondition = data;
								_self.getPersonelList();
								// _self.getServerData();
				            }
				        }
				    ]
				})
			},
			async getPersonelList() {
				this.searchCondition['pageSize'] = this.pageSize;
				this.searchCondition['pageNum'] = this.pageNum;
				this.more = 'loading';
				let res = await ApiService.getPersonnelList(this.searchCondition);
				// console.log('getPersonelList',JSON.stringify(res));
				console.log('getPersonelList',this.pageNum);
				if(res.success) {
					this.personList = this.reLoad?res.data.data.rows:this.personList.concat(res.data.data.rows);
					console.log('getPersonelList',this.personList.length);
					if(this.personList.length != res.data.data.total) {
						this.pageNum += 1;
						this.more = 'more';
					} else {
						this.more = 'noMore';
					}
					
				} else {
					 
				}
				if(this.reLoad) {
					uni.stopPullDownRefresh();
					this.reLoad = false;
				}
			},
			gotoDetail(item) {
				console.log(item)
				uni.navigateTo({
					url: 'personnelDetail?item='+JSON.stringify(item)
				})
			}
		}
	}
</script>

<style>
	page {
		background: #f9f9f9;
		overflow-x: hidden;
	}
	.nav-style {
		font-family: 'PingFangSC-Semibold', 'PingFang SC Semibold', 'PingFang SC';
		height: 45px;
	}
	.status_style {
		float: right;position: absolute;right: 35px;
		font-size: 16px;
		font-family: 'PingFangSC-Regular', 'PingFang SC';
	}
	.common_color {
		color:#074498
	}
	.title_size {
		font-size: 16px;
	}
	.status_color_use {
		color: #73B703;
	}
	.status_color_forbidden {
		color: #D9001B;
	}
	.item_text {
		/* padding-top: 8px; */
		font-family: 'PingFangSC-Regular', 'PingFang SC';
		color: #333333;
		font-size: 14px;
		line-height: 25px;
	}
	.arrow_right {
		width: 20px;
		height: 25px;
		float: right;
		right: 20px;
		position: absolute;
	}
	.item_content {
		padding: 10px 0px 0px 0px; display: flex;flex-direction: column;
	}
	.divider {
		height: 0.5px;width: 100%; background-color: #dbdbdb;margin-top: 10px;
	}
	.flex_vcenter {
		display: flex; align-items: center;
	}
	.item {
		border-bottom: #f9f9f9 8px solid;padding: 0px 15px 0px 15px;
	}
</style>

标签：console,log,color,app,item,上拉,uni,data,more
来源： https://blog.csdn.net/liuye066/article/details/121247483