uniapp简单实现下拉刷新和上拉加载更多，uni-app实现上拉加载更多

前言

下面操作说明包括uniapp的下拉刷新和上拉加载更多。

实现

需要修改pages.json文件，如下

{
    "easycom" : {
        "^u-(.*)" : "@/uni_modules/uview-ui/components/u-$1/u-$1.vue"
    },
    "pages" : [
    {
		    "path" : "/page/applet/user",
		    "style" : {
		        "navigationBarTitleText" : "测试标题",
		        "enablePullDownRefresh" : true ,// 开启下拉刷新
				"onReachBottomDistance": 0 // 0是大概还剩高度，拉到底部触发（一般用于加载更多）
				"backgroundColor": "#F8F8F8" // 下拉加载中背景颜色
		    }
		}
    ],
    
}

直接复制这个代码过去就可以测试了（.vue文件）

<template>
	<view>
		<!-- 动态内容 -->
		<view v-for="(item, index) in dataList" :key="index" style="padding: 12px 0px;margin: 12px;">
			<text>{{item.id}}</text>
			<image :src="item.src" style="width: 100%;height:100px;"></image>
		</view>
		<!-- 加载中/没有更多 -->
		<uni-load-more iconType="auto" :status="status" v-if="loadShow"/>


	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: '校园新闻',
				userInfo: {},
				dataList: [],
				status: 'more',
				loadShow: false,
				queryObj: {
					page: 1,
					limit: 10,
					lastId: -1,
					lastLen: -1,
				},
				isloading: false,
				count: 0,
			}
		},
		onLoad() {
			this.userInfo = uni.getStorageSync('userInfo'); // 获取用户信息
			this.loadPageList();
		},
		//【触底的事件-加载更多】
		onReachBottom() {
			if (this.status == 'noMore') {
				return;
			}
			if (this.queryObj.lastLen == 0 || this.queryObj.limit > this.queryObj.lastLen) {
				//this.tips("数据已加载完毕");
				this.status = 'noMore';
				return;
			}
			if (this.isloading) {
				return;
			}
			this.status = 'loading';
			this.isloading = true;
			this.loadPageList();
		},
		// 下拉监听
		onPullDownRefresh() {
			uni.showNavigationBarLoading(); // 头部标题刷新
			this.loadPageList(true);
		},
		// 所有方法
		methods: {
			//【初始化加载】--------------------------------------------------------------------------------------------------------
			loadPageList(clearData) {
				// 逻辑：每次分页拉取10条，由于怕其他地方更新数据，这里显示重复数据，则根据最小的lastId开始查之前的
				// this.jsAjax.post('/applet/user/select', JSON.stringify({
				// 	oid: this.userInfo.oid,
				// 	page: this.queryObj.page,
				// 	limit: this.queryObj.limit,
				// 	lastId: this.queryObj.lastId,
				// }), (res) => {
				// 	if (res.success) {
				// 		// 是否清除数据
				// 		if (clearData) {
				// 			this.count = 0;
				// 			this.queryObj.lastLen = -1;
				// 			this.queryObj.lastId = -1;
				// 			this.dataList = [];
				// 		}
				// 		var list = res.data;
				// 		this.queryObj.lastLen = list.length;
				// 		if (list.length > 0) {
				// 			this.queryObj.lastId = list[list.length - 1].id;
				// 		}
				// 		for (var i = 0; i < list.length; i++) {
				// 			this.dataList.push(list[i]);
				// 		}
				// 	}
				// 	this.isloading = false;
				// 	uni.stopPullDownRefresh(); // 停止下拉刷新
				// 	uni.hideNavigationBarLoading();
				// 	this.status = 'more';
				// 	this.loadShow = true;
				// 	if (this.queryObj.lastLen == 0 || this.queryObj.limit > this.queryObj.lastLen) {
				// 		//this.tips("数据已加载完毕");
				// 		this.status = 'noMore';
				// 		return;
				// 	}
				// }, false, "application/json;charset=UTF-8")
				
				// 模拟调用接口
				setTimeout(()=>{
					
					// 是否清除数据
					if (clearData) {
						this.queryObj.lastLen = -1;
						this.queryObj.lastId = -1;
						this.dataList = [];
					}
					
					
					var list = [1, 1, 1, 1, 1, 1, 1, 1, 1, 1];
					// 假设分页没有数据了
					if(this.count >= 20){
						this.queryObj.lastLen = 0;
					}else{
						this.queryObj.lastLen = list.length;
					}
					
					
					for(var i=0; i<list.length; i++){
						this.count = this.count + 1;
						this.dataList.push({
							id: this.count,
							src: "https://box.kancloud.cn/798b9617df2e40914bbed2dfe03729db_695x264.png"
						});
					}
					
					this.isloading = false;
					uni.stopPullDownRefresh(); // 停止下拉刷新
					uni.hideNavigationBarLoading();
					this.status = 'more';
					this.loadShow = true;
					
					if (this.queryObj.lastLen == 0 || this.queryObj.limit > this.queryObj.lastLen) {
						//this.tips("数据已加载完毕");
						this.status = 'noMore';
						return;
					}
				}, 1000)
				
			},
		},
	}
</script>

<style>
	page {
		background-color: #fff !important;
	}
</style>

效果图

---

下拉刷新

---

上拉加载更多

---