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.hqwc.cn/news/97435.html

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

相关文章

电脑录屏卡顿是什么原因 电脑录屏卡顿怎么变流畅

大家在电脑录屏的时候可能会遇到卡顿的情况,其实造成电脑录屏卡顿的因素有很多,环境外部因素和软件内部因素都会对电脑产生影响,今天我们来解答电脑录屏卡顿是什么原因,电脑录屏卡顿怎么变流畅,一起来看看吧。 一、电脑…

Java智慧工地大数据中心源码

智慧工地技术架构:微服务JavaSpring Cloud VueUniApp MySql 智慧工地形成安全、质量、进度、人员、机械、绿色施工六大针对性解决方案。 安全管理 围绕重大危险源提供管控,可视化跟踪消防、安防、基坑、高支模、临边防护、卸料平台等设施设备的安全状态…

智慧导览|智能导游系统|AR景区导览系统|景区电子导览

随着文旅市场的加快复苏,以及元宇宙、VR、AR、虚拟数字人等新兴技术的快速发展,文旅行业也正在加快数字化转型的步伐,向智慧景区建设迈进。为满足不同年龄段游客的游览需要,提升旅游服务体验,越来越多的旅游景区、博物…

Kind创建本地环境安装Ingress

目录 1.K8s什么要使用Ingress 2.在本地K8s集群安装Nginx Ingress controller 2.1.使用Kind创建本地集群 2.1.1.创建kind配置文件 2.1.2.执行创建命令 2.2.找到和当前k8s版本匹配的Ingress版本 2.2.1.查看当前的K8s版本 2.2.2.在官网中找到对应的合适版本 2.3.按照版本安…

vue3+ts+uniapp实现小程序端input获取焦点计算上推页面距离

vue3tsuniapp实现小程序端input获取焦点计算上推页面距离 input获取焦点计算上推页面距离 1.先说我这边的需求2.发现问题3.解决思路4.代码展示 自我记录 1.先说我这边的需求 需求 1.给键盘同级添加一个按钮例如’下一步’ or ‘确认’ 这种按钮 2.初步想法就是获取input焦点时…

[github-100天机器学习]day4+5+6 Logistic regression

https://github.com/MLEveryday/100-Days-Of-ML-Code/blob/master/README.md 逻辑回归 逻辑回归用来处理不同的分类问题,这里的目的是预测当前被观察的对象属于哪个组。会给你提供一个离散的二进制输出结果,一个简单例子:判断一个人是否会在…

时序预测 | MATLAB实现TCN-BiGRU时间卷积双向门控循环单元时间序列预测

时序预测 | MATLAB实现TCN-BiGRU时间卷积双向门控循环单元时间序列预测 目录 时序预测 | MATLAB实现TCN-BiGRU时间卷积双向门控循环单元时间序列预测预测效果基本介绍模型描述程序设计参考资料 预测效果 基本介绍 1.MATLAB实现TCN-BiGRU时间卷积双向门控循环单元时间序列预测&a…

2023年产业地产研究报告

第一章 行业概况 1.1 定义 产业地产是一种特殊类型的房地产,它以土地为基本要素,以企业为投资、开发、运营的主要主体。这种类型的房地产以区域“产、城、人”的有效聚合和持续发展为核心,产业运营和空间运营为主要盈利途径。产业地产的主要…

ELK框架Logstash配合Filebeats和kafka使用

ELK框架Logstash配合Filebeats和kafka使用 本文目录 ELK框架Logstash配合Filebeats和kafka使用配置文件结构input为标准输入,output为标准输出input为log文件output为标准输出output为es input为tcpspringboot配置logstash配置 input为filebeatsfilebeats配置logsta…

[羊城杯 2023] web

文章目录 D0nt pl4y g4m3!!! D0n’t pl4y g4m3!!! 打开题目&#xff0c;可以判断这里为php Development Server 启动的服务 查询得知&#xff0c;存在 PHP<7.4.21 Development Server源码泄露漏洞(参考文章) 抓包&#xff0c;构造payload 得到源码 class Pro{private $ex…

Selenium 三种等待方式详解 (强制等待、隐式等待、显示等待)

前言 ①在进行WEB自动化工作时&#xff0c;一般要等待某一页面元素加载完成后&#xff0c;才能对该元素执行操作&#xff0c;否则自动化脚本会抛出找不到元素的错误&#xff0c;这样就要求我们在UI自动化测试的有些场景上加上等待时间。 ②等待方式的设置是保证自动化脚本稳定…

【模方ModelFun】实景三维建模和修模4.0.7最新版安装包以及图文安装教程

模方ModelFun 具有多种功能&#xff0c;旨在帮助用户进行实景三维建模和修模。以下是一些主要功能的简要介绍&#xff1a; 实景三维建模&#xff1a;【模方ModelFun】提供了自动化的实景三维重建功能&#xff0c;可以从实景图像中提取几何形状和纹理信息&#xff0c;生成高质量…