网站建设先进个人事迹,沧州网站建设推广,免费的自建视频网站,莆田做网站的公司前言
小程序的内容基本都是滑动到底部加载下一页#xff0c;这个一般都没有什么好用的组件来用#xff0c;我看vant和uniapp的插件里最多只有个分页#xff0c;没有滚动到底部加载下一页。再次做个记录。
效果预览 下滑到底部若是有下一页#xff0c;则会自动加载下一页这个一般都没有什么好用的组件来用我看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 classaddAction styleposition:fixed;bottom:0; width:100%view clickAddStaffAction 新增员工/view/view以上就是本文全部内容。其中onLoad中的uni.$on这部分内容是配合滚动加载使用的效果就是检测下一个页面也就是我的修改员工信息页面中若是修改员工信息了就自动重新加载reload更新本页数据若是没有检测到数据更改则不更新本页数据。
uni.$on的具体使用方式
