当前位置: 首页 > news >正文

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.lryc.cn/news/162542.html

相关文章:

  • 最新2米分辨率北极开源DEM数据集(矢量文件)
  • 【计算机网络】HTTP(下)
  • 自学Python03-学会Python中的while循环语句
  • PatchMatchNet 学习笔记 译文 深度学习三维重建
  • 为什么要使用设计模式,以及使用设计模式的好处
  • 【Springcloud】Sentinel熔断和降级
  • javascript实战开发:json数据求指定元素的和算法
  • 娱乐时间 —— 用python将图片转为excel十字绘
  • OJ练习第160题——LRU 缓存
  • 使用 Hugging Face Transformer 创建 BERT 嵌入
  • unity 控制Dropdown的Arrow箭头变化
  • Java开发面试--nacos专区
  • GB28181学习(三)——心跳保活
  • 黑马JVM总结(三)
  • 【数据结构】二叉树基础入门
  • MFC自定义消息的实现方法----(线程向主对话框发送消息)、MFC不能用UpdateData的解决方法
  • Linux单列模式实现线程池
  • 汇川PLC学习Day3:轴控代码编写、用户程序结构说明与任务配置示例、用户变量空间与编址
  • javaee springMVC Map ModelMap ModelAndView el和jstl的使用
  • vue监听表单输入的身份证号自动填充性别和生日
  • 蓝桥杯官网练习题(翻硬币)
  • 企业架构LNMP学习笔记34
  • Python学习之六 循环结构
  • flutter 网络地址URL转file
  • 【JavaEE基础学习打卡07】JDBC之应用分层设计浅尝!
  • Helm Kubernetes Offline Deploy Rancher v2.7.5 Demo (helm 离线部署 rancher 实践)
  • 网络编程day6——基于C/S架构封装的线程池
  • ARM/X86工业级数据采集 (DAQ) 与控制产品解决方案
  • 【Java】Jxls--轻松生成 Excel
  • MySQL主从复制读写分离