当前位置：首页 > news >正文

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

news 2025/9/15 16:49:04

前言

小程序的内容基本都是滑动到底部加载下一页，这个一般都没有什么好用的组件来用，我看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 添加 onReachBottom 函数

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

1.5 在onLoad 加载reload 函数

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

1.6 我的新增员工的样式，

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

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

uni.$on的具体使用方式

前言