uniapp 处理 分页请求

news2024/10/6 12:22:45

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

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.coloradmin.cn/o/971514.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【python爬虫】16.爬虫知识点总结复习

文章目录 前言爬虫总复习工具解析与提取(一)解析与提取(二)更厉害的请求存储更多的爬虫更强大的爬虫——框架给爬虫加上翅膀 爬虫进阶路线指引解析与提取 存储数据分析与可视化更多的爬虫更强大的爬虫——框架项目训练 反爬虫应对…

8K视频来了,8K 视频编辑的最低系统要求

当今 RED、Canon、Ikegami、Sony 等公司的 8K 摄像机以及 8K 电视,许多视频内容制作人和电影制作人正在认真考虑 8K 拍摄、编辑和后期处理,需要什么样的系统来处理如此海量的数据? 中央处理器(CPU) 首先,…

Redis 集群环境案例安装步骤

1. 3主3从redis集群配置 1.1 找3台真实虚拟机,各自新建 mkdir -p /myredis/cluster 1.2 新建6个独立的redis实例服务 1.2.1 本次案例设计说明(ip有变化) https://processon.com/diagraming/5fe6d76ce401fd549c8fe708 1.2.2 IP: 192.168.111.175端门6381/端口6…

基于Matlab实现多个图像压缩案例(附上源码+数据集)

图像压缩是一种将图像数据量减少的技术,以减少存储空间和传输带宽的需求。在本文中,我们将介绍如何使用Matlab实现图像压缩。 文章目录 简单案例源码数据集下载 简单案例 首先,我们需要了解图像压缩的两种主要方法:有损压缩和无…

深入理解联邦学习——联邦学习的分类:基础知识

分类目录:《深入理解联邦学习》总目录 在实际中,孤岛数据具有不同分布特点,根据这些特点,我们可以提出相对应的联邦学习方案。下面,我们将以孤岛数据的分布特点为依据对联邦学习进行分类。 考虑有多个数据拥有方&…

[国产MCU]-W801开发实例-MQTT客户端通信

MQTT客户端通信 文章目录 MQTT客户端通信1、MQTT介绍2、W801的MQTT客户端相关API介绍3、代码实现本文将详细介绍如何在W801中使用MQTT协议通信。 1、MQTT介绍 MQTT 被称为消息队列遥测传输协议。它是一种轻量级消息传递协议,可通过简单的通信机制帮助资源受限的网络客户端。 …

thinkphp6 入门(5)-- 模型是什么 怎么用

一、模型 MVC架构 之前开发一个功能,后端为在控制器(C)中写 php SQL,前端为在页面(V)中写html css js,这就形成了 VC 架构。 但是发现,相同的数据逻辑(SQL&#xf…

会话跟踪技术学习笔记(Cookie+Session)+ HTTP学习笔记

一、会话跟踪技术(CookieSession) 1.1 预备知识 1. 会话:用户打开浏览器,访问web服务器的资源,会话建立,直到有一方断开连接,会话结束。在一次会话中可以包含多次请求和响应。 2. 会话跟踪&a…

l8-d6 socket套接字及TCP的实现框架

一、socket套接字 /*创建套接字*/ int socket(int domain, int type, int protocol); /*绑定通信结构体*/ int bind(int sockfd, const struct sockaddr *addr, socklen_t addrlen); /*监听套接字*/ int listen(int sockfd, int backlog); /*处理客户端发起的连接&#xff0…

Beats:安装及配置 Metricbeat (二)- 8.x

这篇文章是继文章 “Beats:安装及配置 Metricbeat (一)- 8.x” 的续篇。你可以先阅读之前的那篇文章再继续阅读这篇文章。我们在这篇文章中继续之前的探讨。 使用 fingerprint 来代替证书 在实际的使用中,我们需要从 Elasticsear…

【Eclipse】Project interpreter not specified 新建项目时,错误提示,已解决

目录 0.环境 1)问题截图: 2)错误发生原因: 1.解决思路 2.具体步骤 0.环境 windows 11 64位,Eclipse 2021-06 1)问题截图: 2)错误发生原因: 由于我手欠,将…

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

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

一加11/Ace2/10Pro手机如何实现全局120HZ高刷-游戏超级流畅效果

已经成功root啦。安卓13目前也一样支持LSPosed框架,如果你对LSP框架有需求,也可以使 自测120HZ刷新率诞生以后,很多小伙伴用上了就很难回来啦,一加11/Ace2/10Pro/9pro手 机厂商也对新机做了很多的适配,让我们日常使用起…

【Spring Boot】使用MyBatis注解实现数据库操作

使用MyBatis注解实现数据库操作 MyBatis还提供了注解的方式,相比XML的方式,注解的方式更加简单方便,无须创建XML配置文件。接下来好好研究注解的使用方式。 1.XML和注解的异同 1)注解模式使用简单,开发效率高&#…

Vue3响应式源码实现

Vue3响应式源码实现 初始化项目结构 vue-proxy ├── effect.js ├── effect.ts ├── index.html ├── index.js ├── package.json ├── reactive.js ├── reactive.ts └── webpack.config.jsreactive.ts import { track, trigger } from "./effect&q…

文心一言api接入如何在你的项目里使用文心一言

文心一言api接入在项目里接入文心一言 一、百度文心一言API二、使用步骤1、接口2、请求参数3、请求参数示例4、接口 返回示例 三、 如何获取appKey和uid1、申请appKey:2、获取appKey和uid 四、重要说明 一、百度文心一言API 基于百度文心一言语言大模型的智能文本对话AI机器人…

DDR2 IP核调式记录2

本文相对简单,只供自己看看就行。从其它的博客找了个代码,然后记录下仿真波形。 1. 功能 直接使用quartus生成的DDR2 IP核,然后实现循环 -->写入burst长度的数据后读出。 代码数据的传输是32位,实际使用了两片IC。因此IP核也是…

npm版本升级报错

解决方法: 执行npm install --legacy-peer-deps依赖对等 npm install xxx --legacy-peer-deps命令用于绕过peerDependency里依赖的自动安装;它告诉npm忽略项目中引入的各个依赖模块之间依赖相同但版本不同的问题,以npm v4-v6的方式去继续执行…

OC和Swift混编,导入头文件‘xxx-Swift.h‘ file not found

在OC的项目里加入Swift代码,创建完桥接文件后,需要倒入Swift头文件,头文件的格式为“项目名-Swift.h”。 如下图,我在Xcode上看到我的项目名为YichangPark,导入 #import "YiChangPark-Swift.h" 之后提示 “Y…