如何实现上拉刷新下拉加载

1、在pages.json文件     开启 ​​enablePullDownRefresh​​

"enablePullDownRefresh": true

2、ArRoval是下拉刷新组合的数据

这部分是自己封装的接口

options.url = myApi.listApproval;
            options.method = 'POST';
            options.data = that.persone;
            that.$request(options).then(res => {

}）

（适用于小程序token过期验证，有需要请查看，之前写的有点搂，简单的方式以后更新uni-app 接口封装 微信小程序token 过期无痕获取_uni-app的token过期,重新获取token_My&Liu的博客-CSDN博客

微信登录请查看

    如何实现微信小程序微信授权登录_My&Liu的博客-CSDN博客

<!-- 审核页面 -->
<template>
	<view>
	</view>
</template>

<script>
import myApi from '@/utils/app.js';
export default {
	data() {
		return {
			
			ArRoval: [],
			persone: {
				pageNo: 1,
				pageSize: 10
			},
			loadingTxt: '暂无数据'
		};
	},
	created() {
		let that = this;
		that.loadDate();
	},
	// 下拉刷新数据
	onPullDownRefresh() {
		let that = this;
		that.loadDate('resh');
	},
	// 上拉数据加载
	onReachBottom() {
		let timer = null;
		let that = this;
		//阻止重复加载
		if (timer !== null) {
			clearTimeout(timer);
		}
		timer = setTimeout(() => that.LoadMore(), 500);
	},
	methods: {
		loadDate(resh) {
			let that = this;
			let options = {};
			options.url = myApi.listApproval;
			options.method = 'POST';
			options.data = that.persone;
			that.$request(options).then(res => {
				if (res.code == '200') {
					that.ArRoval = res.result;
					if (resh) {
						uni.stopPullDownRefresh();
					}
				}
			});
		},
		LoadMore() {
			let that = this;
			let options = {};
			that.loadingTxt = '加载中';
			that.persone.pageNo++;
			options.url = myApi.listApproval;
			options.method = 'POST';
			options.data = that.persone;
			that.$request(options).then(res => {
				if (res.code == '200') {
					if (that.ArRoval.length >= res.total) {
						that.loadingTxt = '数据已加载完';
						return that.loadingTxt;
					}
					that.ArRoval = that.ArRoval.concat(res.result);
					//停止下拉样式
					uni.stopPullDownRefresh();
					//隐藏标题读取
					uni.hideNavigationBarLoading();
				}
			});
		}
	}
};
</script>

<style lang="scss">
.clflexBtn {
	width: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
	align-self: center;
}
</style>

3、全部代码

<!-- 审核页面 -->
<template>
	<view>
		<!-- 提示框 -->
		<u-notify ref="uNotify" message="Hi uView"></u-notify>
		<!-- 导航栏 -->
		<u-sticky bgColor="#fff"><u-tabs :list="list" @click="Onroval"></u-tabs></u-sticky>
		<!-- 人员列表 -->
		<!-- 已审批 -->
		<Apoved v-if="current == 1" />
		<!-- 未审批 -->
		<penroval v-if="current == 0" :ArRoval="ArRoval" />
		<!-- 下拉刷新 -->
		<u--text type="info" align="center" :text="loadingTxt" />
	</view>
</template>

<script>
import myApi from '@/utils/app.js';
import { tabs } from '@/pages/pagesA/mine/mine.js';
// 已审批
import Apoved from '@/pages/pagesA/components/mine/Apoved.vue';
// 未审批
import penroval from '@/pages/pagesA/components/mine/penroval.vue';
export default {
	components: {
		penroval,
		Apoved
	},
	data() {
		return {
			list: tabs.List,
			current: 0,
			ArRoval: [],
			persone: {
				pageNo: 1,
				pageSize: 10
			},
			loadingTxt: '暂无数据'
		};
	},
	created() {
		let that = this;
		that.loadDate();
	},
	// 下拉刷新数据
	onPullDownRefresh() {
		let that = this;
		that.loadDate('resh');
	},
	// 上拉数据加载
	onReachBottom() {
		let timer = null;
		let that = this;
		//阻止重复加载
		if (timer !== null) {
			clearTimeout(timer);
		}
		timer = setTimeout(() => that.LoadMore(), 500);
	},
	methods: {
		loadDate(resh) {
			let that = this;
			let options = {};
			options.url = myApi.listApproval;
			options.method = 'POST';
			options.data = that.persone;
			that.$request(options).then(res => {
				if (res.code == '200') {
					that.ArRoval = res.result;
					if (resh) {
						that.Notify('success','刷新成功')
						uni.stopPullDownRefresh();
					}
				}
			});
		},
		Notify(type, mes) {
			let that = this;
			that.$refs.uNotify.show({
				type: type,
				message: mes
			});
		},
		LoadMore() {
			let that = this;
			let options = {};
			that.loadingTxt = '加载中';
			that.persone.pageNo++;
			options.url = myApi.listApproval;
			options.method = 'POST';
			options.data = that.persone;
			that.$request(options).then(res => {
				if (res.code == '200') {
					if (that.ArRoval.length >= res.total) {
						that.loadingTxt = '数据已加载完';
						return that.loadingTxt;
					}
					that.ArRoval = that.ArRoval.concat(res.result);
					//停止下拉样式
					uni.stopPullDownRefresh();
					//隐藏标题读取
					uni.hideNavigationBarLoading();
				}
			});
		},
		// tabs事件
		Onroval(item) {
			let that = this;
			let inx = item.index;
			that.current = inx;
		}
	}
};
</script>

<style lang="scss">

</style>