uniapp ，微信小程序，滚动（下滑，上拉）到底部加载下一页内容

前言

小程序的内容基本都是滑动到底部加载下一页，这个一般都没有什么好用的组件来用，我看vant和uniapp的插件里最多只有个分页，没有滚动到底部加载下一页。再次做个记录。

效果预览

下滑到底部若是有下一页，则会自动加载下一页，若是没有，或者是已经加载完所有数据则提示数据加载完毕，（我这个遮挡了手机号部分。虽然是胡乱写的，但是但是不出现为好）

踩坑点

这两点非常重要 ！！！
1.内容部分一定要要用scroll-view 来包裹，不然没法触发onReachBottom
2.比如我的新增员工这个底部按钮，不要用固定定位，不然也没法触发onReachBottom，

实现逻辑

1.1 定义数据当前页码和总页码

先定义总页码和当前页码,

data() {
		return {
			data: [],
			currentPage: 1,//页码
			totle_page: 0,//总页码
		};
	},

1.2 拿到后端给的数据的页码

        // 员工列表
        // 这里是我封装的网络请求，记得替换成你们的，最主要的就是请求成功之后的逻辑处理
		async GetStaffData() {
			const res = await this.$axios("Basic/GetStaff", {
				title: this.searchYG,
				status: '',//状态(留空查询全部，0禁用1正常)
				types: '',//类型(留空查询全部，1正式工2临时工)
				page: this.currentPage,//页码
				limit: '',//每页数量
			});
			console.log("员工信息", JSON.parse(JSON.stringify(res)));
			if (res.data.code === 0) {
				this.totle_page = res.data.totle_page;
				if (this.currentPage === 1) {
					this.data = res.data.lists;
				} else {
					this.data = [...this.data, ...res.data.lists];
				}
				this.currentPage++;
			} else {
				uni.showToast({
					title: res.data.msg,
					icon: 'none',
					duration: 1000
				});
			}
		},

totle_oage:总页数

1.3 定义reload函数

reload() {
			this.currentPage = 1; // 重置页码
			this.data = []; // 清空数据
			this.GetStaffData(); // 加载数据
		},

1.4 添加 scroll-view 绑定 onReachBottom函数

给 scroll-view 添加 onReachBottom函数，给特殊情况无法到最底部，触发不到 onReachBottom函数，可以直接scroll-view 中添加触发scroll-view 得底部来触发onReachBottom函数

提示：1.4步骤不是必须点，除去也是可以正常用的，这个就是用来解决特殊情况触发不到底部用的。

<scroll-view class="xuqiu-list" scroll-y scrollY="true" @scrolltolower="onReachBottom">
   滚动内容
</scroll-view>

1.5 添加 onReachBottom 函数

onReachBottom() {
			if (this.currentPage <= this.totle_page) {
				this.GetStaffData()
			} else {
				uni.showToast({
					title: '已加载完所有数据',
					icon: 'none',
					duration: 1000
				});
			}
		},

1.6 在onLoad 加载reload 函数

onLoad() {
		this.reload();
		uni.$on('callreload', () => {
			this.reload();
		});
	},

1.7 我的新增员工的样式，

<view class="addAction"   style="position:fixed;bottom:0; width:100%">
			<view @click="AddStaffAction"> 新增员工</view>
	</view>

以上就是本文全部内容。其中onLoad中的uni.$on这部分内容是配合滚动加载使用的，效果就是检测下一个页面，也就是我的修改员工信息页面中若是，修改员工信息了就自动重新加载reload，更新本页数据，若是没有检测到数据更改，则不更新本页数据。

uni.$on的具体使用方式