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的具体使用方式

相关推荐
摇头的金丝猴4 小时前
uniapp vue3 使用echarts-gl 绘画3d图表
前端·uni-app·echarts
小远yyds6 小时前
跨平台使用高德地图服务
前端·javascript·vue.js·小程序·uni-app
万岳科技程序员小金6 小时前
从源码到成品应用:互联网医院系统与在线问诊APP的开发全解析
小程序·软件开发·app开发·在线问诊系统源码·在线问诊app开发
V+zmm101347 小时前
社区养老服务小程序ssm+论文源码调试讲解
java·服务器·前端·javascript·小程序·毕业设计·1024程序员节
说私域7 小时前
以客户为导向在开源 AI 智能名片 2 + 1 链动模式 S2B2C 商城小程序内容创作中的实践与价值
人工智能·小程序·开源
qq22951165028 小时前
uniapp+vue加油服务系统 微信小程序
vue.js·微信小程序·uni-app
重生之我是菜鸡程序员8 小时前
uniapp 使用vue/pwa
javascript·vue.js·uni-app
2401_8441390310 小时前
Java爱情交友婚恋系统小程序源码
微信·微信小程序·小程序·微信公众平台·交友·微信开放平台
qq229511650210 小时前
asp.net+uniapp养老助餐管理系统 微信小程序
微信小程序·uni-app·asp.net
qq229511650211 小时前
微信小程序 uniapp网络记账设计个人理财系统
微信小程序·小程序·uni-app