uniapp ,微信小程序,滚动(下滑,上拉)到底部加载下一页内容

前言

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

效果预览

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

踩坑点

这两点非常重要 !!!

1.内容部分一定要要用scroll-view 来包裹,不然没法触发onReachBottom

2.比如我的新增员工这个底部按钮,不要用固定定位,不然也没法触发onReachBottom,

实现逻辑

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

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

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

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

javascript 复制代码
        // 员工列表
        // 这里是我封装的网络请求,记得替换成你们的,最主要的就是请求成功之后的逻辑处理
		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函数

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

1.4 添加 onReachBottom 函数

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

1.5 在onLoad 加载reload 函数

javascript 复制代码
onLoad() {
		this.reload();
		uni.$on('callreload', () => {
			this.reload();
		});
	},

1.6 我的新增员工的样式,

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

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

uni.$on的具体使用方式

相关推荐
new出一个对象2 小时前
uniapp接入BMapGL百度地图
javascript·百度·uni-app
new出一个对象3 小时前
uniapp接入高德地图
uni-app
dccose4 小时前
vue3 uniapp 扫普通链接或二维码打开小程序并获取携带参数
小程序·uni-app
上优9 小时前
uniapp 选择 省市区 省市 以及 回显
大数据·elasticsearch·uni-app
尘浮生10 小时前
Java项目实战II基于微信小程序的校运会管理系统(开发文档+数据库+源码)
java·开发语言·数据库·微信小程序·小程序·maven·intellij-idea
尘浮生14 小时前
Java项目实战II基于微信小程序的电影院买票选座系统(开发文档+数据库+源码)
java·开发语言·数据库·微信小程序·小程序·maven·intellij-idea
HerayChen16 小时前
微信小程序混合 h5 wx.miniProgram是 undefined
微信小程序·小程序·h5
耶啵奶膘21 小时前
uniapp+vue2全局监听退出小程序清除缓存
小程序·uni-app
中云DDoS CC防护蔡蔡1 天前
微信小程序被攻击怎么选择高防产品
服务器·网络安全·微信小程序·小程序·ddos