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 添加 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的具体使用方式
相关文章:
uniapp ,微信小程序,滚动(下滑,上拉)到底部加载下一页内容
前言 小程序的内容基本都是滑动到底部加载下一页,这个一般都没有什么好用的组件来用,我看vant和uniapp的插件里最多只有个分页,没有滚动到底部加载下一页。再次做个记录。 效果预览 下滑到底部若是有下一页,则会自动加载下一页&…...
MySQL中的日志类型有哪些?binlog、redolog和undolog的作用和区别是什么?
简介: MySQL中有六种日志文件,分别是:重做日志(redo log)、回滚日志(undo log)、二进制日志(binlog)、错误日志(errorlog)、慢查询日志࿰…...
【uni-app】创建自定义模板
1. 步骤 打开自定义模板文件夹 在此文件夹下创建模板文件(注意后缀名) 重新点击“新建页面” 即可看到新建的模板 2. 注意事项 创建的模板必须文件类型对应(vue模板就创建*.vue文件, uvue模板就创建*.uvue文件)...
Cesium移动Primitive位置
与传统的Entity实体不同,Primitive作为一种自定义基本图元,几何形状、材质和其他属性均由使用者定义,在需要绘制大量静态几何图形的高效渲染场景中更为适用。 Primitive的移动涉及到矩阵变换,并不像Entity那样给它替换一个新的坐…...
安卓13默认连接wifi热点 android13默认连接wifi
总纲 android13 rom 开发总纲说明 文章目录 1.前言2.问题分析3.代码分析4.代码修改5.编译6.彩蛋1.前言 有时候我们需要让固件里面内置好,相关的wifi的ssid和密码,让固件起来就可以连接wifi,不用在手动操作。 2.问题分析 这个功能,使用普通的安卓代码就可以实现了。 3.代…...
parted 磁盘分区
目录 磁盘格式磁盘分区文件系统挂载使用扩展 - parted、fdisk、gdisk 区别 磁盘格式 parted /dev/vdcmklabel gpt # 设置磁盘格式为GPT p # 打印磁盘信息此时磁盘格式设置完成! 磁盘分区 开始分区: mkpart data_mysql # 分区名&…...
第三百零八节 Log4j教程 - Log4j日志到数据库
Log4j教程 - Log4j日志到数据库 我们可以使用log4j API通过使用org.apache.log4j.jdbc.JDBCAppender对象将信息记录到数据库中。 下表列出了JDBCAppender的配置属性。 属性描述bufferSize设置缓冲区大小。默认大小为1。driverJDBC驱动程序类。默认为sun.jdbc.odbc.JdbcOdbcDr…...
ai智能语音电销机器人可以做哪些事情?
AI智能语音电销机器人是结合人工智能技术进行自动化电话销售和客户互动的工具,能够完成一系列任务,有助于提升销售效果、优化客户体验和提高工作效率。以下是AI智能语音电销机器人可以做的一些主要事情: 1. 自动拨号 AI语音电销机器人可以自…...
CleanShot X - Mac(苹果电脑)专业截图录屏软件
CleanShot X 不仅提供了基础的截图功能,更内置了强大的图片编辑器,让你能轻松添加标注、形状、文本……以及将多个截图进行合并。 无论是为社交媒体制作图文,还是制作专业的产品 / 教程演示,CleanShot X 都能满足你的需求。 软件…...
Kafka 客户端工具使用分享【offsetexplorer】
前言: 前面我们使用 Spring Boot 继承 Kafka 完成了消息发送,有朋友会问 Kafka 有没有好用的客户端工具,RabbitMQ、RocketMQ 都有自己的管理端,那 Kafka 如何去查看发送出去的消息呢? 本篇我们就来分享一个好用的工具…...
uni-app 下拉刷新、 上拉触底(列表信息)、 上滑加载(短视频) 一键搞定
一、下拉刷新 1. 首先找到pages.json中 给需要进行下拉刷新的页面设置可以下拉刷新 2. 然后在需要实现下拉刷新的script标签内添加 导入onPullDownRefresh import {onPullDownRefresh} from dcloudio/uni-app 下拉刷新触发的事件 onPullDownRefresh(()> {console.log(正…...
基于Spring Boot+Vue的助农销售平台(协同过滤算法、限流算法、支付宝沙盒支付、实时聊天、图形化分析)
🎈系统亮点:协同过滤算法、节流算法、支付宝沙盒支付、图形化分析、实时聊天; 一.系统开发工具与环境搭建 1.系统设计开发工具 后端使用Java编程语言的Spring boot框架 项目架构:B/S架构 运行环境:win10/win11、jdk1…...
如何在Linux环境中的Qt项目中使用ActiveMQ-CPP
文章目录 代码1:消费者代码2:生成者 之前在Linux下的qt程序中使用activeMQ的时候也是用了很多时间去研究,本来想的是好好记录一下,但是当时顾着写代码。很多细节也不想再去走一遍了。大概写一下怎么使用就行了。注意:一…...
HTML字符实体详解
HTML 字符实体是在 HTML 文档中用来表示特定字符的特殊编码。这些字符可能因为直接输入而引发解析错误,或某些字符在 HTML 中具有特殊含义(例如,< 和 > 用于标签)。因此,使用字符实体可以确保文本的准确呈现。 1. 什么是字符实体? 字符实体由一个 & 符号开始,…...
Netty学习——NIO基础与IO模型
导学 Socket和NIO的区别 Socket和NIO是Java中用于网络编程的两个不同的API,具有不同的设计理念和用途。以下是它们的主要区别: 1. 定义 Socket: Socket是Java中用于实现网络通信的传统API,通常被称为Java I/O(输入/输出&#…...
ZYNQ7045之YOLO部署——FPGA-ZYNQ Soc实战笔记1
一、简介 1、目标检测概念 2、目标检测应用 3、目标检测发展历程 二、YOLO V1 1、输入 必须为448x448分辨率 2、网络结构 卷积 池化 卷积 池化 3、输出 最终7x7x30表示,7x7个各自,每个格子有30个数据,30个数据包含两个部分 1:…...
Spring中的资源以及分类
Spring中的资源都被封装成 Resource 对象 以上是我测试代码的项目编译后的目录结构,target 所在的目录是 D:\\IdeaProjects\\study-spring\\ public void printStream(InputStream inputStream) throws IOException {Reader reader new InputStreamReader(input…...
初步认识Java,及使用
JAVA 特点 简单性 面向对象 分布式 健壮性 安全性 体系结构中立(平台无关) 可移植性 解释执行 高性能 多线程 动态 发展史 JDK,Eclipse下载,…...
C,C++被static标记的变量和函数分别是什么意思
被static关键字标记的变量和函数的含义 在C中,static关键字可以用于变量和函数的声明,它具有不同的语义和用途:static变量 1.全局静态变量:当全局变量被声明为static时,其作用域被限制为声明它的文件,即使使…...
Map 不常用方法介绍
getOrDefault 尝试获取key对应的值,如果未获取到,就返回默认值。 例子: private static void testGetOrDefault() {Map<String, String> map new HashMap<>(4);map.put("123", "123");String key "…...
KubeSphere 容器平台高可用:环境搭建与可视化操作指南
Linux_k8s篇 欢迎来到Linux的世界,看笔记好好学多敲多打,每个人都是大神! 题目:KubeSphere 容器平台高可用:环境搭建与可视化操作指南 版本号: 1.0,0 作者: 老王要学习 日期: 2025.06.05 适用环境: Ubuntu22 文档说…...
树莓派超全系列教程文档--(61)树莓派摄像头高级使用方法
树莓派摄像头高级使用方法 配置通过调谐文件来调整相机行为 使用多个摄像头安装 libcam 和 rpicam-apps依赖关系开发包 文章来源: http://raspberry.dns8844.cn/documentation 原文网址 配置 大多数用例自动工作,无需更改相机配置。但是,一…...
Leetcode 3576. Transform Array to All Equal Elements
Leetcode 3576. Transform Array to All Equal Elements 1. 解题思路2. 代码实现 题目链接:3576. Transform Array to All Equal Elements 1. 解题思路 这一题思路上就是分别考察一下是否能将其转化为全1或者全-1数组即可。 至于每一种情况是否可以达到…...
Golang 面试经典题:map 的 key 可以是什么类型?哪些不可以?
Golang 面试经典题:map 的 key 可以是什么类型?哪些不可以? 在 Golang 的面试中,map 类型的使用是一个常见的考点,其中对 key 类型的合法性 是一道常被提及的基础却很容易被忽视的问题。本文将带你深入理解 Golang 中…...
《从零掌握MIPI CSI-2: 协议精解与FPGA摄像头开发实战》-- CSI-2 协议详细解析 (一)
CSI-2 协议详细解析 (一) 1. CSI-2层定义(CSI-2 Layer Definitions) 分层结构 :CSI-2协议分为6层: 物理层(PHY Layer) : 定义电气特性、时钟机制和传输介质(导线&#…...
线程与协程
1. 线程与协程 1.1. “函数调用级别”的切换、上下文切换 1. 函数调用级别的切换 “函数调用级别的切换”是指:像函数调用/返回一样轻量地完成任务切换。 举例说明: 当你在程序中写一个函数调用: funcA() 然后 funcA 执行完后返回&…...
Cinnamon修改面板小工具图标
Cinnamon开始菜单-CSDN博客 设置模块都是做好的,比GNOME简单得多! 在 applet.js 里增加 const Settings imports.ui.settings;this.settings new Settings.AppletSettings(this, HTYMenusonichy, instance_id); this.settings.bind(menu-icon, menu…...
k8s业务程序联调工具-KtConnect
概述 原理 工具作用是建立了一个从本地到集群的单向VPN,根据VPN原理,打通两个内网必然需要借助一个公共中继节点,ktconnect工具巧妙的利用k8s原生的portforward能力,简化了建立连接的过程,apiserver间接起到了中继节…...
Caliper 配置文件解析:config.yaml
Caliper 是一个区块链性能基准测试工具,用于评估不同区块链平台的性能。下面我将详细解释你提供的 fisco-bcos.json 文件结构,并说明它与 config.yaml 文件的关系。 fisco-bcos.json 文件解析 这个文件是针对 FISCO-BCOS 区块链网络的 Caliper 配置文件,主要包含以下几个部…...
听写流程自动化实践,轻量级教育辅助
随着智能教育工具的发展,越来越多的传统学习方式正在被数字化、自动化所优化。听写作为语文、英语等学科中重要的基础训练形式,也迎来了更高效的解决方案。 这是一款轻量但功能强大的听写辅助工具。它是基于本地词库与可选在线语音引擎构建,…...
