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这个就是总条数,要是达到总条数就不加载了

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

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

相关文章

【大数据】Apache Superset:可视化开源架构

Apache Superset是什么 Apache Superset 是一个开源的现代化数据可视化和数据探索平台&#xff0c;主要用于帮助用户以交互式的方式分析和展示数据。有不少丰富的可视化组件&#xff0c;可以将数据从多种数据源&#xff08;如 SQL 数据库、数据仓库、NoSQL 数据库等&#xff0…

开源 vGPU 方案 HAMi 解析

开源 vGPU 方案 HAMi 一、k8s 环境下 GPU 资源管理的现状与问题 &#xff08;一&#xff09;资源感知与绑定 在 k8s 中&#xff0c;资源与节点紧密绑定。对于 GPU 资源&#xff0c;我们依赖 NVIDIA 提供的 device-plugin 来进行感知&#xff0c;并将其上报到 kube-apiserver…

反射的底层实现原理?

Java 反射机制详解 目录 什么是反射&#xff1f;反射的应用反射的实现反射的底层实现原理反射的优缺点分析 一、什么是反射&#xff1f; 反射是 Java 编程语言中的一个强大特性&#xff0c;它允许程序在运行期间动态获取类和操纵类。通过反射机制&#xff0c;可以在运行时动…

【技术支持】安卓无线adb调试连接方式

Android 10 及更低版本&#xff0c;需要借助 USB 手机和电脑需连接在同一 WiFi 下&#xff1b;手机开启开发者选项和 USB 调试模式&#xff0c;并通过 USB 连接电脑&#xff08;即adb devices可以查看到手机&#xff09;&#xff1b;设置手机的监听adb tcpip 5555;拔掉 USB 线…

Golang学习历程【第六篇 复合数据类型map函数初识】

Golang学习历程【第六篇 复合数据类型map&函数初识】 1. Map数据类型1.1. Map声明和初始化1.2. Map 遍历1.3 Map增删改查 2. function (函数)2.1 函数各种定义方式 1. Map数据类型 Map结构是键值对的集合&#xff0c;其中每个键都是唯一的&#xff0c;并且每个键都映射到一…

《框架程序设计》期末复习

目录 Maven 简介 工作机制&#xff08;★&#xff09; 依赖配置&#xff08;★&#xff09; Maven命令 MyBatis 入门 单参数查询&#xff08;★&#xff09; 多参数查询&#xff08;★★★&#xff09; 自定义映射关系&#xff08;★★★&#xff09; 基本增删改查操…

于交错的路径间:分支结构与逻辑判断的思维协奏

大家好啊&#xff0c;我是小象٩(๑ω๑)۶ 我的博客&#xff1a;Xiao Xiangζั͡ޓއއ 很高兴见到大家&#xff0c;希望能够和大家一起交流学习&#xff0c;共同进步。* 这一节内容很多&#xff0c;文章字数达到了史无前例的一万一&#xff0c;我们要来学习分支与循环结构中…

ffplay 命令行 从视频第N帧开始读取 ffmpeg 命令行 提取第N帧图片

ffmpeg中没有直接的命令读取第N帧 但是可以通过 t N/framerate 来获取到具体第N帧的时间 然后用 -ss t进行跳转。 比如帧率&#xff08;frame rate&#xff09;为24fps的视频G:/1/1.mp4文件从第1000帧开始进行播放&#xff0c;先计算出时间为 t 41.66666 ffplay -i G:/1/1.…

计算机图形学【绘制立方体和正六边形】

工具介绍 OpenGL&#xff1a;一个跨语言的图形API&#xff0c;用于渲染2D和3D图形。它提供了绘制图形所需的底层功能。 GLUT&#xff1a;OpenGL的一个工具库&#xff0c;简化了窗口创建、输入处理和其他与图形环境相关的任务。 使用的函数 1. glClear(GL_COLOR_BUFFER_BIT |…

探秘block原理

01 概述 在iOS开发中&#xff0c;block大家用的都很熟悉了&#xff0c;是iOS开发中闭包的一种实现方式&#xff0c;可以对一段代码逻辑进行封装&#xff0c;使其可以像数据一样被传递、存储、调用&#xff0c;并且可以保存相关的上下文状态。 很多block原理性的文章都比较老&am…

科大讯飞前端面试题及参考答案 (下)

除了 echarts 还了解其它画图工具吗? 除了 Echarts,还有不少优秀的画图工具可供选择使用。 Highcharts:它是一款功能强大且应用广泛的图表绘制工具,支持多种常见的图表类型,像柱状图、折线图、饼图、散点图等,同时也能创建较为复杂的图表,比如仪表盘图表、极坐标图等。H…

【HarmonyOS Next NAPI 深度探索2】N-API 的工作机制与架构

【HarmonyOS Next NAPI 深度探索2】N-API 的工作机制与架构 如果你听说过 N-API&#xff0c;但还不太了解它的作用和背后的工作机制&#xff0c;那这篇文章会帮你捋清楚它的结构和原理。N-API 是 Node.js 提供的一个强大工具&#xff0c;专门用于开发高性能、可维护的原生模块…

vue3+ts+element-plus 对话框el-dialog设置圆角

对话框el-dialog设置圆角&#xff0c;实现的需求效果&#xff1a; 目前只能通过行内样式&#xff08;style"border-radius: 20px"&#xff09;来实现圆角效果&#xff1a;

14综合面试篇(综合面试题)

目录 一、关于null的问题 二、springboot jar启动参数的配置linux Xms Xmx 三、java -jar 启动参数问题 四、 java打一个jar包放到linux服务器上&#xff0c;这种默认参数的启动&#xff0c;是怎么知道分配原则和配置原则? 五、Linux系统下jar包自启动 六、i&#xff0c;…

机器学习算法(三):K近邻(k-nearest neighbors)

1 KNN的介绍和应用 1.1 KNN的介绍 kNN(k-nearest neighbors)&#xff0c;中文翻译K近邻。我们常常听到一个故事&#xff1a;如果要了解一个人的经济水平&#xff0c;只需要知道他最好的5个朋友的经济能力&#xff0c; 对他的这五个人的经济水平求平均就是这个人的经济水平。这…

大语言模型兵马未动,数据准备粮草先行

​从OpenAI正式发布ChatGPT开始&#xff0c;大型语言模型&#xff08;LLM&#xff09;就变得风靡一时。对业界和吃瓜群众来说&#xff0c;这种技术最大的吸引力来自于理解、解释和生成人类语言的能力&#xff0c;毕竟这曾被认为是人类独有的技能。类似CoPilot这样的工具正在迅速…

Network Compression(李宏毅)机器学习 2023 Spring HW13 (Boss Baseline)

1. Introduction to Network Compression 深度学习中的网络压缩是指在保持神经网络性能的同时,减少其规模的过程。这非常重要,因为深度学习模型,尤其是用于自然语言处理或计算机视觉的大型模型,训练和部署的计算成本可能非常高。网络压缩通过降低内存占用并加快推理速度,…

UnityDots学习(二)

在一里已经概述了什么是Dots&#xff0c;已经如果使用它&#xff0c;我们要做的思维转变。 简单总结下&#xff1a; Dots使用了计算器多核&#xff0c;已经3级缓存的优势&#xff0c;在此基础上使用Brust编译器对各个平台实现了代码优化。从而达到了加速提升的效果。 我们要…

Linux (CentOS) 安装 Docker 和 Docker Compose

&#x1f680; 作者主页&#xff1a; 有来技术 &#x1f525; 开源项目&#xff1a; youlai-mall ︱vue3-element-admin︱youlai-boot︱vue-uniapp-template &#x1f33a; 仓库主页&#xff1a; GitCode︱ Gitee ︱ Github &#x1f496; 欢迎点赞 &#x1f44d; 收藏 ⭐评论 …

c++ 预备

目录 前言 一&#xff0c;知识点的补充 二&#xff0c;c语言与c 三&#xff0c;面向对象的三大特点 前言 将进入c的学习&#xff0c;接下来是对于c的预备和c的一些预习 一&#xff0c;知识点的补充 1 标识符 标识符不能为关键字 标识符只能由下划线&#xff0c;数字&#xf…