uniapp 处理 分页请求

我的需求是手机上一个动态滚动列表,下拉到底部时,触发分页数据请求

uniapp上处理分页解决方案

主要看你是如何写出滚动条的。我想到的目前有三种

(1)页面滚动:直接使用onReachBottom方法,可以监听到达底部

(2)scroll-view滚动:它的@scrolltolower方法,可以监听到达底部

(3)某个元素:设置了固定高度和 overflow-y: auto; 产生滚动,暂时没找解决方案,如何监听到达底部。

=》目前我使用的是scroll-view组件,因为我的滚动内容在一个顶部tabBar切换里面,无法产生页面滚动,也就没法下拉刷新了

一、分页技术

原理就是:利用页码(pageIndex) 和 页的大小(pageSize)来一块一块的请求数据,之后在前端拼成一起显示。技术优势就是提高前端加载速度。

为什么会有页码和页的大小这两个参数呢?

答:数据是服务端提供的,那么这就跟服务端技术有关,实际其实是数据库知识,MySQL里面有一个查询关键次叫 limit用来根据索引查数据的,也就是从第几条开始,查几条结束。

例如: pageindex =1,  pageSize = 6

后端开发者,就根据公式: (pageIndex-1)*pageSize,算出第1页时,开始下标为0 ,查询6条

例如: pageindex =2,  pageSize = 6

后端开发者,就根据公式: (pageIndex-1)*pageSize,算出第1页时,开始下标为6 ,查询6条

1. PC端上的分页

2. 移动端手机上使用分页

3. 总结

        虽然表现形式不一样,最基础的分页逻辑是一样。PC端上点击页码来分页,手机端根据滚动到底部,自动增加页码,来请求数据。

        其次像懒加载和预加载,我个人认为它应该是组件内部该处理的,因为这个性能优化问腿,

=》性能优化问题应该归组件本身,不能混到逻辑开发中,否则写出的代码就会很复杂

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/121597.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

文件读取漏洞复现(Metinfo 6.0.0)

文章目录 安装环境启动环境漏洞复现代码审计 安装环境 安装phpstudy,下载MetInfo 6.0.0版本软件,复制到phpstudy目录下的www目录中。 打开phpstudy,访问浏览器127.0.0.1/MetInfo6.0.0/install/index.php,打开Meinfo 6.0.0主页&a…

Vue+Element-ui实现表格本地导入

表格文件存储在前端 如图,表格文件template.xlsx存储在public下的static文件夹下 注意这里的路径容易报错 a链接下载文件失败的问题(未发现文件) a.href ‘./static/template.xlsx’ 写的时候不能带public,直接这么写就可以 DownloadTemp…

leetcode每日一练-第53题-最大子数组和

一、思路 动态规划 二、解题方法 使用了两个变量 maxSum 和 currentSum 来分别记录全局的最大和和当前连续子数组的和。遍历数组时,我们不断更新 currentSum,并比较是否需要更新 maxSum。最后,maxSum 就是最大的连续子数组和。 三、code …

质量属性案例-架构真题(二十一)

试题一 某电子商务公司升级会员与促销管理系统,向用户提交个性化服务,提高用户粘性。在项目建立之初,公司领导人一致认为目标是提升会员管理方式的灵活性,由于当前用户规模不大,用户简单,系统方面不需要做…

【算法与数据结构】700、LeetCode二叉搜索树中的搜索

文章目录 一、题目二、解法三、完整代码 所有的LeetCode题解索引&#xff0c;可以看这篇文章——【算法和数据结构】LeetCode题解。 一、题目 二、解法 思路分析&#xff1a;二叉搜索树的性质&#xff1a;左节点键值 < 中间节点键值 < 右节点键值。那么我们根据此性质&am…

seata1.4.2版本配置总结

文章目录 环境准备&#xff1a;seata-server配置registry.conf创建数据库表 nacos配置client配置seata_orderseata_storageseata_account 注意点 创建项目seata-order-service2001pom.xml文件application.yml 实体类CommonResultOrder DaoOrderDaoOrderMapper.xml config配置类…

文件上传漏洞全面渗透姿势

0x00 文件上传场景 (本文档只做技术交流) 文件上传的场景真的随处可见&#xff0c;不加防范小心&#xff0c;容易造成漏洞&#xff0c;造成信息泄露&#xff0c;甚至更为严重的灾难。 比如某博客网站评论编辑模块&#xff0c;右上角就有支持上传图片的功能&#xff0c;提交带…

指令系统(408)

一、拓展操作码指令格式 【2017 统考】某计算机按字节编址&#xff0c;指令字长固定且只有两种指令格式&#xff0c;其中三地址指令29条、二地址指令107条&#xff0c;每个地址字段6位&#xff0c;则指令字长至少应该是&#xff08; A&#xff09; A、24位 B、26位 …

Springboot + Sqlite实战(离线部署成功)

最近有个需求&#xff0c;是手机软件离线使用&#xff0c; 用的springboot mybatis-plus mysql&#xff0c;无法实现&#xff0c;于是考虑使用内嵌式轻量级的数据库SQLlite 引入依赖 <dependency><groupId>org.xerial</groupId><artifactId>sqlite-…

清理docker镜像方法

首先stop ps -a里的容器&#xff0c;然后rm容器&#xff0c;最后再rmi镜像 先停止容器 rm容器 docker rmi 镜像 删除后可以发现已经不存在

论文复现--VideoTo3dPoseAndBvh(视频转BVH和3D关键点开源项目)

分类&#xff1a;动作捕捉 github地址&#xff1a;https://github.com/HW140701/VideoTo3dPoseAndBvh 所需环境&#xff1a; Windows10&#xff0c;CUDA11.6&#xff0c;conda 4.13.0&#xff1b; 目录 环境搭建conda list配置内容演示生成文件说明 环境搭建 # 创建环境 conda…

uniapp 配置并使用 VueX

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态&#xff0c;并以相应的规则保证状态以一种可预测的方式发生变化。 uni-app 内置了 VueX 1、创建需要的文件 右键点击 根目录【我的是 uni-shop】&#xff0c;然后新建 目录&a…

网络安全-IP地址信息收集

本文为作者学习文章&#xff0c;按作者习惯写成&#xff0c;如有错误或需要追加内容请留言&#xff08;不喜勿喷&#xff09; 本文为追加文章&#xff0c;后期慢慢追加 IP反查域名 http://stool.chinaz.com/same https://tools.ipip.net/ipdomain.php 如果渗透目标为虚拟主机…

【力扣每日一题】2023.9.4 序列化和反序列化二叉搜索树

目录 题目&#xff1a; 示例&#xff1a; 分析&#xff1a; 代码&#xff1a; 题目&#xff1a; 示例&#xff1a; 分析&#xff1a; 题目给我们一棵搜索二叉树&#xff0c;要我们将这棵二叉树转变为字符串&#xff0c;同时我们需要根据字符串再变回二叉树&#xff0c;具体…

基于单片机的万年历温度无线传输控制系统系统

一、系统方案 本设计采用DS1302采集年月日时分秒&#xff0c;DS18B20采集温度值&#xff0c;按键设置温度报警上下限&#xff0c;实际测量温度低于下限或高于上限&#xff0c;蜂鸣器报警&#xff0c;同时将测量温度上传到蓝牙助手。 二、硬件设计 原理图如下&#xff1a; 三…

基于Matlab实现频谱分析(附上源码+数据集)

Matlab是一个功能强大的数值计算和科学计算软件&#xff0c;可以用于频谱分析。频谱分析是一种信号处理技术&#xff0c;用于将时域信号转换为频域信号&#xff0c;以便更好地理解信号的频率特性。本文将介绍使用Matlab实现频谱分析的方法。 文章目录 部分源码完整源码数据集下…

Mysql高阶语句(二)

一、设置别名&#xff08;alias ——>as&#xff09; 在 MySQL 查询时&#xff0c;当表的名字比较长或者表内某些字段比较长时&#xff0c;为了方便书写或者 多次使用相同的表&#xff0c;可以给字段列或表设置别名。使用的时候直接使用别名&#xff0c;简洁明了&#xff0…

【微服务部署】三、Jenkins+Maven插件Jib一键打包部署SpringBoot应用Docker镜像步骤详解

前面我们介绍了K8SDockerMaven插件打包部署SpringCloud微服务项目&#xff0c;在实际应用过程中&#xff0c;很多项目没有用到K8S和微服务&#xff0c;但是用到了Docker和SpringBoot&#xff0c;所以&#xff0c;我们这边介绍&#xff0c;如果使用Jenkinsjib-maven-plugin插件打…

无涯教程-Android - List fragments函数

框架的ListFragment的静态库支持版本&#xff0c;用于编写在Android 3.0之前的平台上运行的应用程序&#xff0c;在Android 3.0或更高版本上运行时,仍使用此实现。 List fragment 的基本实现是用于创建fragment中的项目列表 List in Fragments 示例 本示例将向您说明如何基于…

LSM树详解

LSM树(Log-Structured-Merge-Tree)的名字往往会给初识者一个错误的印象&#xff0c;事实上&#xff0c;LSM树并不像B树、红黑树一样是一颗严格的树状数据结构&#xff0c;它其实是一种存储结构&#xff0c;目前HBase,LevelDB,RocksDB这些NoSQL存储都是采用的LSM树。 LSM树的核…