Vue.js如何实现对一千张图片进行分页加载?
目录
vue处理一千张图片进行分页加载
分页加载、懒加载---概念介绍:
思路:
开发过程中,如果后端一次性返回你1000多条图片或数据,那我们前端应该怎么用什么思路去更好的渲染呢?
第一种:我们可以使用分页加载
第二种:我们可以进行懒加载
分页加载、懒加载---概念介绍:
分页加载和懒加载都是用于优化网页性能和用户体验的技术。
分页加载是指将一个大型内容列表分成多个小的部分(例如每页显示10个),然后在用户向下滚动页面时,加载下一页的内容。这种技术可以减少页面加载时间和带宽使用,并提高页面的反应速度。此外,分页加载还可以让用户更轻松地找到他们想要的内容,而不必一次性浏览大量的内容。
懒加载是指在用户浏览网页时,仅加载当前可见的部分内容,而不是一次性加载整个页面。例如,在一个包含多张图片的页面中,只有当用户向下滚动页面时,才会加载下面的图片。这种技术可以减少页面加载时间和带宽使用,提高页面的反应速度,并减少对服务器的负载。此外,懒加载还可以让用户更快速地访问网页,因为他们不必等待整个页面加载完毕。
需要注意的是,分页加载和懒加载并不是互斥的概念,有些情况下可以同时使用这两种技术来进一步提高网页性能和用户体验。
那我们用第一种方法使用分页加载的方法进行渲染
思路:
//dataList 在data中定义的数组来接收总数居
//imgList 在data中定义的数组来接受页面显示图片的数组
- 第一步:我们定义一个数组并且将1000条数据赋值给它
- 第二步:我们先解决分页的问题,我们使用
el-pagination组件先给该组件 的"total"、"page"、"limit"分别赋值 - 第三步:页面初始化的时候,我们首先加载dataList的前十条数据具体代码如下:
this.imgList = this.dataList.slice(0,10) - 第三步:当我们点击分页时,我们给
el-pagination组件添加@pagination事件,在事件的方法中,我们可以获取到当前页面以及当前显示条数
我们在这个方法中需要给el-pagination组件中"size"、"page"参数赋值,然后在截取dataList在该页面的数据并且给imgList数组进行赋值。
//获取该页的数据 let minNum = (val.page - 1)*val.limit let maxNum =val.page*val.limit this.imgList = dataList.slice(minNum,maxNum)
具体代码
//渲染容器
<el-card class="box-card"v-for="(item,index) in imglist":key="item"shadow="hover"><div class="box-card-div"><imgclass="screen-img":src="item.img":key="index":alt="item.name"/><div class="title">{{ item.name }}</div></div>
</el-card>//分页
<paginationv-show="toggPage.total > 0":total="toggPage.total":page.sync="toggPage.currentPage":limit.sycn="toggPage.size"@pagination="togghandleCurrentChange"/>
//因为业务需求封装的方法
queryImgList(){//给页面家了一个loadingthis.imgloading = true//获取分页总条数this.toggPage.total = this.dataList.length//页面初始化时显示的前十条数据this.imgList = dataList.slice(0,10)this.imgloading = false
},
togghandleCurrentChange(val){//如果不知道val可以在这打印console.log('val',val)this.imgloading = truethis.toggPage.size = val.limitthis.toggPage.currentPage = val.page//记得将数据先制空在进行赋值,否则你懂的this.imgList = []//获取当前页面的数据let minNum = (val.page - 1)*val.limitlet maxNum = val.page*val.limitthis.imgList = this.dataList.slice(minNum,maxNum)this.imgloading = false
}
以上就可以完美结果该需求了,因为我们需求更复杂,删了不少代码
如果更想完美可以它加一个模糊查询
我们以图片名称或者某个字段进行查询
思路:
queryImgValue //输入框绑定的值
queryBtn // 查询按钮事件方法名称
- 第一步: 添加一个
el-input给输入框绑定一个v-model,然后添加el-button并且添加一个@click事件 - 第二步: 点击按钮触发
queryBtn方法,在该方法中循环dataList然后根据循环的item.name跟queryImgValue进行匹配,如果包含输入的值就push到一个新数组并且给this.imgList进行赋值
具体代码:
queryBtn(){//之所以判断是否为空 -----如果用户没有输入直接点击就没必要再去执行下面代码if(this.queryImgValue){let img = []//循环该数据进行匹配this.dataList.forEach(item => {//如果name包含用户输入的名称将该条数据push到新数组中if(item.name.includes(this.queryImgValue)){img.push(item)}})//赋值给imgList,不要忘记还需要给查询的总条数赋值哟this.imglist = imgthis.toggPage.total = this.imglist.length}
}
以上就很完美啦!!!
相关文章:
Vue.js如何实现对一千张图片进行分页加载?
目录 vue处理一千张图片进行分页加载 分页加载、懒加载---概念介绍: 思路: 开发过程中,如果后端一次性返回你1000多条图片或数据,那我们前端应该怎么用什么思路去更好的渲染呢? 第一种:我们可以使用分页…...
计算机网络复习(六)
考点:MIME及其编码(base64,quoted-printable)网络协议http是基于什么协议,应用层到网络层基于什么协议6-27.试将数据 11001100 10000001 00111000 进行 base64 编码,并得到最后传输的 ASCII 数据。答:先将 24 比特的二…...
Redis进阶:布隆过滤器(Bloom Filter)及误判率数学推导
1 缘起 有一次偶然间听到有同事在说某个项目中使用了布隆过滤器, 哎呦,我去,我竟然不知道啥是布隆过滤器, 这我哪能忍?其实,也可以忍,但是,可能有的面试官不能忍!&#…...
Java创建对象的方式
Java创建对象的五种方式: (1)使用new关键字 (2)使用Object类的clone方法 (3)使用Class类的newInstance方法 (4)使用Constructor类中的newInstance方法 (5&am…...
dom基本操作
1、style修改样式 基本语法: 元素.style.样式’值‘ 注意: 1.修改样式通过style属性引出 2.如果属性有-连接符,需要转换为小驼峰命名法 3.赋值的时候,需要的时候不要忘记加css单位 4.后面的值必须是字符串 <div></div> // 1、…...
如何将python训练的XGBoost模型部署在C++环境推理
当前环境:Ubuntu,xgboost1.7.4过程介绍:首先用python训练XGBoost模型,在训练完成后注意使用xgb_model.save_model(checkpoint.model)进行模型的保存。找到xgboost的动态链接库和头文件动态链接库:如果你在conda环境下面…...
About Oracle Database Performance Method
bottleneck(瓶颈): a point where resource contention is highest throughput(吞吐量): the amount of work that can be completed in a specified time. response time (响应时间): the time to complete a spec…...
JavaScript 日期和时间的格式化大汇总(收集)
一、日期和时间的格式化 1、原生方法 1.1、使用 toLocaleString 方法 Date 对象有一个 toLocaleString 方法,该方法可以根据本地时间和地区设置格式化日期时间。例如: const date new Date(); console.log(date.toLocaleString(en-US, { timeZone: …...
【Python】缺失值可视化工具库:missingno
文章目录一、前言二、下载二、使用介绍2.1 绘制缺失值条形图2.2 绘制缺失值热力图2.3 缺失值树状图三、参考资料一、前言 在我们进行机器学习或者深度学习的时候,我们经常会遇到需要处理数据集缺失值的情况,那么如何可视化数据集的缺失情况呢࿱…...
【代码随想录二刷】Day18-二叉树-C++
代码随想录二刷Day18 今日任务 513.找树左下角的值 112.路径总和 113.路径总和ii 106.从中序与后序遍历序列构造二叉树 105.从前序与中序遍历序列构造二叉树 语言:C 513.找树左下角的值 链接:https://leetcode.cn/problems/find-bottom-left-tree-va…...
制造业的云ERP在外网怎么访问?内网服务器一步映射到公网
随着企业信息化、智能化时代的到来,很多制造业企业都在用云ERP。用友U 9cloud通过双版本公有云专属、私有云订阅、传统软件购买三种模式满足众多制造业企业的需求,成为一款适配中型及中大型制造业的云ERP,是企业数智制造的创新平台。 用友U 9…...
zookeeper 复习 ---- 练习
zookeeper 复习 ---- 练习在同一节点配置三个 zookeeper,配置正确的是? A: zoo1.cfg tickTime2000 initLimit5 syncLimit2 dataDir/var/lib/zookeeper/zoo1 clientPort2181 server.1localhost:2666:3666 server.2localhost:2667:3667 serv…...
2023年全国最新道路运输从业人员精选真题及答案1
百分百题库提供道路运输安全员考试试题、道路运输从业人员考试预测题、道路安全员考试真题、道路运输从业人员证考试题库等,提供在线做题刷题,在线模拟考试,助你考试轻松过关。 11.在以下选项中关于安全生产管理方针描述正确的是(…...
Java每日一练——Java简介与基础练习
系列文章目录 提示:这里可以添加系列文章的所有文章的目录,目录需要自己手动添加 例如:第一章 Python 机器学习入门之pandas的使用 文章目录 目录 系列文章目录 文章目录 前言 一、简述解释型语言与编译型语言 二、Java语言的执行流程 2.1、…...
解决Edge浏览器主页被篡改问题,或许可以帮你彻底解决
问题描述: 之前从一个第三方网站下载了一个不知名软件,接着电脑就各种下载360全家桶之类的软件,后来问题解决了,但是还残留了一些问题,前几天发现edge浏览器的主页被改成了360导航,就是那个该死的hao123&a…...
字符设备驱动基础(一)
目录 一、Linux内核对设备的分类 linux的文件种类: Linux内核按驱动程序实现模型框架的不同,将设备分为三类: 总体框架图: 二、设备号------内核中同类设备的区分 三、申请和注销设备号 四、函数指针复习 4.1、 内存四区 …...
将 Supabase 作为下一个后端服务
对于想快速实现一个产品而言,如果使用传统开发,又要兼顾前端开发,同时又要花费时间构建后端服务。然而有这么一个平台(Baas Backend as a service)后端即服务,能够让开发人员可以专注于前端开发,…...
14:高级篇 - CTK 服务工厂 简述
作者: 一去、二三里 个人微信号: iwaleon 微信公众号: 高效程序员 一般情况下,服务对象在被注册之后,任何其它的 Plugin 在请求该服务时,CTK Plugin Framework 都返回的是同一个对象。倘若要为每一个 Plugin 消费者返回不同的服务对象,或者在真正需要该服务对象时才创建…...
Java中的链表实现介绍
Java中的链表实现介绍 学习数据结构的的链表和树时,会遇到节点(node)和链表(linked list)这两个术语,节点是处理数据结构的链表和树的基础。节点是一种数据元素,包括两个部分:一个是…...
演示Ansible中的角色使用方法(ansible roles)
文章目录一、ansible 角色简介二、roles目录结构三、role存放的路径:配置文件ansible.cfg中定义四、创建目录结构五、playbook中使用rolesplaybook变量会覆盖roles中的定义变量六、控制任务执行顺序七、ansible—galaxy命令工具八、安装选择的角色1.从网上下载&…...
AI大模型岗位薪资揭秘:2026大模型岗位薪资,非常详细收藏我这一篇就够了
1. AI系统架构师 薪资范围:100万 - 200万/年 职位要求:需要具备全面的技术背景,精通系统架构设计,能够有效整合AI技术,提升系统性能。要求硕士及以上学历,计算机科学或相关专业背景。 目标院校࿱…...
Win32下用libigl+GLFW3渲染3D模型的完整配置指南(附常见错误排查)
Win32下用libiglGLFW3渲染3D模型的完整配置指南(附常见错误排查) 在Windows平台进行3D图形开发时,libigl与GLFW3的组合为开发者提供了强大的工具集。libigl作为一个轻量级的C几何处理库,与GLFW3这一跨平台的OpenGL窗口管理库结合…...
抖音批量下载终极指南:免费无水印视频一键获取
抖音批量下载终极指南:免费无水印视频一键获取 【免费下载链接】douyin-downloader 项目地址: https://gitcode.com/GitHub_Trending/do/douyin-downloader 你是否曾为保存喜欢的抖音视频而烦恼?面对心仪的内容创作者,想要收藏他们的…...
别再手动拖拽了!用Mermaid语法+draw.io,5分钟搞定系统设计流程图
从文本到图表:Mermaid与draw.io的高效设计工作流革命 每次系统设计会议后,你是否也经历过这样的场景:白板上密密麻麻的逻辑草图需要转化为电子版,而传统拖拽式绘图工具让你在调整箭头和对齐方框上耗费半小时?作为经历…...
保姆级教程:用Docker快速搭建一个可复现的Hive测试环境(专治各种启动报错)
从零构建可复现的Hive沙箱:Docker Compose全流程避坑指南 每次调试Hive时遇到FAILED: HiveException或metastore连接问题,是否感觉像在破解一个没有说明书的密码锁?传统环境配置的不可复现性让问题排查变成一场噩梦。本文将带你用Docker技术…...
OpenCore辅助工具(OCAT)全攻略:从配置到优化的黑苹果必备工具
OpenCore辅助工具(OCAT)全攻略:从配置到优化的黑苹果必备工具 【免费下载链接】OCAuxiliaryTools Cross-platform GUI management tools for OpenCore(OCAT) 项目地址: https://gitcode.com/gh_mirrors/oc/OCAuxiliaryTools 核心价值&…...
VScode 高效开发 Springboot 应用的完整指南
1. 环境准备与项目创建 第一次用VScode开发Springboot项目时,我对着空白编辑器发呆了半小时。后来发现只要装对插件,效率能翻倍。先打开VScode的扩展商店,这三个插件是必装的: Java Extension Pack:包含语言支持、调…...
当多线雷达遇上RTK:一个能跑工业现场的SLAM方案
多传感器融合建图及定位的工程化落地方案,多线雷达rtk;室内室外导航都适用。 包含部署文档和代码注释;包含工程落地角度的优化。 不含运动控制。 室外场景用RTK信号稳如老狗,一进厂房立马抓瞎;多线雷达在室内横扫千军…...
英飞凌AURIX TC3XX GPIO驱动配置与LED呼吸灯实现
1. 认识AURIX TC3XX的GPIO模块 第一次接触英飞凌AURIX TC3XX系列MCU时,我被它强大的GPIO功能惊艳到了。这不仅仅是一个简单的数字输入输出接口,而是集成了多种高级特性的硬件模块。在实际汽车电子项目中,比如氛围灯控制、状态指示灯等场景&a…...
RK3576/RK3588 Yolo11 目标检测 Demo
前言 以前的大作业,根据rknn_model_zoo和easy eai示例代码修改(缝合),仅供参考 后来我试着模块化一些,方便看,但因为核心代码都是直接用的示例代码,所以有些模块还是耦合(composit…...
