uniapp区域滚动——上划进行分页加载数据(详细教程)
##标题
用来总结和学习,便于自己查找
文章目录
一、为什么scroll-view?
1.1 区域滚动页面滚动?
1.2 代码?
二、分页功能?
2.1 如何实现?
2.2 代码?
一、为什么scroll-view?
解释:因为我要实现区域滚动以及分页加载,刚开始使用css的overflow 样式但是实现分页的时候检测不到,
就先只能用scroll-view来实现、但是文档写到会影响性能,暂时数据少感觉不出来先用着,查到还有实现区
域滚动的方法虚拟滚动、<u-list> 和 u-pagination这几种方法、后续可以试一试要是能试通会写在后续文章
里面


1.1 区域滚动页面滚动
就是不是再整个页面进行滚动,而是上面有一部分东西,底下有一部分进行滚动就如底下图片所示
1.2 代码
<scroll-view style="height: 70vh;" :scroll-top="scrollTop" scroll-y="true" @scroll="onScroll"@scrolltolower="onScrollToLower" lower-threshold="50"><!-- <view class="alalmlist" bindscroll="onScroll"> --><view class="care" v-show="careShow" v-for="(item, index) in notification" :key="index"><view class="careText"></view></view><!-- </view> --></scroll-view>
scroll-view把你遍历的东西包裹起来就行style="height: 70vh;"这个要设置高度@scrolltolower=“onScrollToLower” lower-threshold="50"这个就是触底50的时候检测到就触发了onScrollToLower这个函数写分页逻辑即可
二、分页功能?
后台的分页见过哈,一样的不过是竖着的
2.1 如何实现?
思路就是用到触底函数scrolltolower就是上面我说的,触底的时候加载分页,(这个说明一下,后端给你同一个接口里面有两个参数pages,和pagesize,第一个参数pages就是一页的意思,pagesize就是每页有多少条,然后后段会给你返回一个总条数加载完停止加载用的)
2.2 代码?
async searchFoods() {try {const res = await list({action: "list",page_index: this.page,page_size: "5"});if (res.Status) {const data = res.Result;if (res.end<= this.notification.length) {return}this.notification.push(...data)}} catch (err) {console.log(err);}}
解释一下:这个就是触底触发的函数, page_index: this.page,触底之后 this.page要加一,请求下一页的数据page_size这个就是每页显示的条数,res.end这个就是总条数,要是达到总条数就不加载了
相关文章:
uniapp区域滚动——上划进行分页加载数据(详细教程)
##标题 用来总结和学习,便于自己查找 文章目录 一、为什么scroll-view? 1.1 区域滚动页面滚动? 1.2 代码? 二、分页功能? 2.1 如何实现ÿ…...
机器学习(1):线性回归概念
1 线性回归基础 1.1 什么是线性 例如:汽车每小时60KM,3小时可以行使多长距离?已知汽车的速度,则汽车的行使距离只与时间唯一相关。在二元的直角坐标系中,描出这一关系的图是一条直线,所以称为线性关系。 线…...
关于编写测试用例的细枝末节
这里写目录标题 故障判别类-边界考虑示例1.0:若A>20.3且持续时间≥15ms时(判故周期为1000Hz),输出B为1,否则输出B为0。 故障判别类-不可恢复测试示例1.1:若A>20.3且持续时间≥15ms时…...
《计算机网络》课后探研题书面报告_了解PPPoE协议
PPPoE协议的工作原理与应用分析 摘 要 PPPoE(Point-to-Point Protocol over Ethernet)是一种广泛应用于宽带接入的网络协议,特别是在DSL(数字用户线路)和光纤网络中具有重要的应用价值。PPPoE结合了PPP协议的认证、加…...
Linux Centos 安装Jenkins到服务
一、前言 假设你已经下载了jenkins.war 安装了对应的jdk,下面我们来安装jenkins,以服务的形式安装。 二、安装 1)将jenkins.war拷贝到合适的位置,我的位置 /u01/jenkins/ ,位置你自己选。 2)创建系统用户…...
解决“无法定位程序输入点 av_buffer_create 于动态链接库 XXX\Obsidian.exe 上”问题
解决“无法定位程序输入点 av_buffer_create 于动态链接库 XXX\Obsidian.exe 上”问题 问题描述 本人在使用zotero中的zotero one(青柠学术插件)的时候,使用插件跳转obsidian中的对应笔记,出现上图情况。(错误中提到的…...
基于考研概率论知识解读 Transformer:为何自注意力机制要除以根号 dk
Transformer自注意力机制中除以 d k \sqrt{d_k} dk 深度剖析 【 Transformer 系列,故事从 d k \sqrt{d_k} dk 说起】 LLM这么火,Transformer厥功甚伟,某天心血来潮~,再去看看! 它长这个样子: 深入…...
网络安全学习81天(记录)
前言: 小迪安全,81天,开始了php代码审计 思路: 内容: #知识点: 1、审计漏洞-SQL 数据库注入挖掘 1、审计思路-正则搜索&功能追踪&辅助工具 3、审计类型-常规架构&MVC 架构&三方框架 #章…...
MATLAB学习笔记-table
1.在table中叠加table table 的每一列具有固定的数据类型。如果要让表的所有单元格都可以任意填充,就得让每一列都是 cell 类型,这样表中每个单元格都是“一个元胞”。创建时可以先构造一个 空 cell 数组(大小为行数列数)&#x…...
mybatisPlus(条件构造器API)
文章目录 目录一、mybatisPlus的介绍二、mybatisPlus的基础使用配置BaseMapper的基本CURD(增删改查) 三、wrapper(条件构造器)条件构造器(wrapper)通用API基础条件判断:进阶条件判断(…...
5G+工业互联网迈入规模化发展新阶段
百度安全验证 https://blog.csdn.net/qq_25467441/article/details/145036191?sharetypeblogdetail&sharerId145036191&sharereferPC&sharesourceqq_25467441&spm1011.2480.3001.8118 好看视频-轻松有收获 产业供给加速提升。国内主流模组厂商引领全球5G模组…...
【CI/CD构建】关于不小心将springMVC注解写在service层
背景 之前写一个接口的时候没有察觉到将RequestBody这个注解带到service层了。 今天提交代码的时候,插件没有检测到这个低级错误,导致试飞构建连maven编译都过不了,maven找不到程序包org.springframework.web.bind.annotation这个包 结果…...
《鸿蒙Next ArkTS:开启人工智能应用开发高效新旅程》
在当今科技飞速发展的时代,人工智能与鸿蒙Next的结合正成为开发者们关注的焦点。利用鸿蒙Next的ArkTS语言开发高效的人工智能驱动的应用程序,为我们带来了前所未有的机遇和创新空间。 了解ArkTS语言与鸿蒙Next ArkTS是一种基于TypeScript的静态类型脚本…...
Unity 3D游戏开发从入门进阶到高级
本文精心整理了Unity3D游戏开发相关的学习资料,涵盖入门、进阶、性能优化、面试和书籍等多个维度,旨在为Unity开发者提供全方位、高含金量的学习指南.欢迎收藏。 学习社区 Unity3D开发者 这是一个专注于Unity引擎的开发者社区,汇聚了众多Un…...
什么是SSH登录?SSH客户端软件有哪些?
一、SSH解释 SSH(Secure Shell)登录是一种用于计算机之间加密登录的网络协议。SSH登录允许用户通过互联网访问、控制和修改远程服务器。它提供了加密的通信通道,以保护敏感数据的机密性和完整性。SSH协议支持多种应用,包括SSH&…...
Ubuntu服务器提示:检测到存在恶意文件,补救思路
1. 确定文件类型 可以使用file命令来检查该文件的类型,这有助于判断它是否真的是一个恶意文件 file /path/to/the/file 2. 检查文件内容 使用strings命令查看文件内容,看是否有可疑的命令或脚本: strings /path/to/the/file 3. 扫描系统…...
【学习计算机视觉算法的基础及基本编码-基于Python语言--实例教程】
Python视觉算法实际从0-1实例编码 一、学习基础二、学习计算机视觉基础知识三、深度学习在计算机视觉中的应用四、实例项目五、实践与拓展 一、学习基础 数学基础 线性代数: 学习矩阵、向量的基本概念,包括矩阵的加法、乘法、转置等运算。理解矩阵的秩、…...
从零搭建一个Vue3 + Typescript的脚手架——day1
1.开发环境搭建 (1).配置vite vite简介 Vite 是一个由尤雨溪开发的现代化前端构建工具,它利用了浏览器对 ES 模块的原生支持,极大地提升了开发服务器的启动速度和热更新效率。Vite 不仅适用于 Vue.js,还支持 React、Svelte 等多种框架&…...
Pgsql存储占用分析
基础命令 -- 查询表大小 SELECT pg_total_relation_size(table_name);-- 查询表大小(不带索引) SELECT pg_table_size(table_name);-- 查询表索引大小 SELECT pg_indexes_size(table_name);-- 查询表具体大小 SELECT pg_relation_size(table_name); SEL…...
51c自动驾驶~合集46
我自己的原文哦~ https://blog.51cto.com/whaosoft/13050104 #世界模型会是L3自动驾驶的唯一解吗 三维空间占有率(3D Occupancy)预测的目的是预测三维空间中的每个体素是否被占有,如果被占有,则对应的体素将被标记。3D Semant…...
装饰模式(Decorator Pattern)重构java邮件发奖系统实战
前言 现在我们有个如下的需求,设计一个邮件发奖的小系统, 需求 1.数据验证 → 2. 敏感信息加密 → 3. 日志记录 → 4. 实际发送邮件 装饰器模式(Decorator Pattern)允许向一个现有的对象添加新的功能,同时又不改变其…...
智慧医疗能源事业线深度画像分析(上)
引言 医疗行业作为现代社会的关键基础设施,其能源消耗与环境影响正日益受到关注。随着全球"双碳"目标的推进和可持续发展理念的深入,智慧医疗能源事业线应运而生,致力于通过创新技术与管理方案,重构医疗领域的能源使用模式。这一事业线融合了能源管理、可持续发…...
Vue3 + Element Plus + TypeScript中el-transfer穿梭框组件使用详解及示例
使用详解 Element Plus 的 el-transfer 组件是一个强大的穿梭框组件,常用于在两个集合之间进行数据转移,如权限分配、数据选择等场景。下面我将详细介绍其用法并提供一个完整示例。 核心特性与用法 基本属性 v-model:绑定右侧列表的值&…...
Mybatis逆向工程,动态创建实体类、条件扩展类、Mapper接口、Mapper.xml映射文件
今天呢,博主的学习进度也是步入了Java Mybatis 框架,目前正在逐步杨帆旗航。 那么接下来就给大家出一期有关 Mybatis 逆向工程的教学,希望能对大家有所帮助,也特别欢迎大家指点不足之处,小生很乐意接受正确的建议&…...
React19源码系列之 事件插件系统
事件类别 事件类型 定义 文档 Event Event 接口表示在 EventTarget 上出现的事件。 Event - Web API | MDN UIEvent UIEvent 接口表示简单的用户界面事件。 UIEvent - Web API | MDN KeyboardEvent KeyboardEvent 对象描述了用户与键盘的交互。 KeyboardEvent - Web…...
第25节 Node.js 断言测试
Node.js的assert模块主要用于编写程序的单元测试时使用,通过断言可以提早发现和排查出错误。 稳定性: 5 - 锁定 这个模块可用于应用的单元测试,通过 require(assert) 可以使用这个模块。 assert.fail(actual, expected, message, operator) 使用参数…...
【OSG学习笔记】Day 16: 骨骼动画与蒙皮(osgAnimation)
骨骼动画基础 骨骼动画是 3D 计算机图形中常用的技术,它通过以下两个主要组件实现角色动画。 骨骼系统 (Skeleton):由层级结构的骨头组成,类似于人体骨骼蒙皮 (Mesh Skinning):将模型网格顶点绑定到骨骼上,使骨骼移动…...
iOS性能调优实战:借助克魔(KeyMob)与常用工具深度洞察App瓶颈
在日常iOS开发过程中,性能问题往往是最令人头疼的一类Bug。尤其是在App上线前的压测阶段或是处理用户反馈的高发期,开发者往往需要面对卡顿、崩溃、能耗异常、日志混乱等一系列问题。这些问题表面上看似偶发,但背后往往隐藏着系统资源调度不当…...
uniapp 开发ios, xcode 提交app store connect 和 testflight内测
uniapp 中配置 配置manifest 文档:manifest.json 应用配置 | uni-app官网 hbuilderx中本地打包 下载IOS最新SDK 开发环境 | uni小程序SDK hbulderx 版本号:4.66 对应的sdk版本 4.66 两者必须一致 本地打包的资源导入到SDK 导入资源 | uni小程序SDK …...
mac:大模型系列测试
0 MAC 前几天经过学生优惠以及国补17K入手了mac studio,然后这两天亲自测试其模型行运用能力如何,是否支持微调、推理速度等能力。下面进入正文。 1 mac 与 unsloth 按照下面的进行安装以及测试,是可以跑通文章里面的代码。训练速度也是很快的。 注意…...
