【性能优化】在大批量数据下使用 HTML+CSS实现走马灯,防止页面卡顿

切换效果

页面结构变化

1.需求背景

项目首页存有一个小的轮播模块,保密原因大概只能这么展示,左侧图片右侧文字,后端一次性返回几百条数据(开发环境下,生产环境只会更多).无法使用分页解决,前端需要懒加载防止页面卡顿
在这里插入图片描述
写个小demo演示,如下
在这里插入图片描述

2.解决思路

获取到数据后,取第一条数据展示.切换时,这里以查看下一张为例演示.切换下一张时,动态创建一个dom元素,通过字符串的方式设置innerHtml,将下一张的dom元素插入父节点.

同时父元素的第一个子元素(初始展示第一条数据的dom元素)和新创建的展示下一条数据的dom元素同时向左偏移自身宽度,然后把切走的dom元素清除,实现切换效果,同时避免页面大量结构堆积

3.代码如下

仅做了’下一张’功能,其他请自行补充

<template><div class="container"><button @click="golast">上一张</button><button @click="gonext">下一张</button><div class="windows"><div class="scrollBox"><div class="scrollItem"><div class="img"><el-image :src="initialData.imgUrl"></el-image></div><div class="messBox">{{ initialData.mess }}</div></div></div></div></div>
</template>
<script>
export default {data () {return {localData: [{ imgUrl: '../assets/xxx.png', mess: '11111' },{ imgUrl: '../assets/xxx.png', mess: '22222' },{ imgUrl: '../assets/xxx.png', mess: '33333' },{ imgUrl: '../assets/xxx.png', mess: '44444' },{ imgUrl: '../assets/xxx.png', mess: '55555' },{ imgUrl: '../assets/xxx.png', mess: '66666' },],initialData: '', // 初始展示数据nowIndex: 0// 当前展示数据的索引}},created () {},mounted () {this.initData()},computed: {},methods: {initData () {// 初始副职this.initialData = this.localData[this.nowIndex]},// 点击查看上一张golast () {},// 点击查看下一张gonext () {if (this.localData.length <= this.nowIndex + 1) returnthis.readyBox('next')const fatherDom = document.querySelector('.windows')const moveDistanceX = fatherDom.offsetWidthconst domArr = fatherDom.querySelectorAll('.scrollBox')// 这里判断.初始结构和动态创建的元素的初始位置不同,导致偏移时的数值是不同的if (!domArr[0].classList.contains('newScrollBox')) {domArr[0].style.transform = `translate(-${moveDistanceX}px,0px)`} else {domArr[0].style.transform = `translate(-${moveDistanceX * 2}px,0px)`}domArr[1].style.transform = `translateX(-${moveDistanceX}px)`this.nowIndex++// 移除上一个dom元素const timeId1 = setTimeout(() => {fatherDom.removeChild(domArr[0])clearTimeout(timeId1)}, 501)},// 为下一次切换准备dom元素readyBox (type) {// 信息展示列表无数据或只有一条数据时,不执行if (this.localData.length <= 1) returnlet nextShowData = ''// 上一张或下一张要展示的数据const fatherDom = document.querySelector('.windows')// 获取父元素const newDom = document.createElement('div')// 创建新元素// 设置新元素的样式newDom.className = 'scrollBox'newDom.classList.add('newScrollBox')newDom.style.width = '100%'newDom.style.height = '100%'newDom.style.position = 'absolute'newDom.style.transition = 'all 0.5s'// 上一张if (type === 'last') {// 判断当前展示列表是否合法if (this.nowIndex - 1 < 0) returnnextShowData = this.localData[this.nowIndex - 1]//此处省略........,自行补充}//   下一张if (type === 'next') {// 判断当前展示列表是否合法if (this.localData.length <= this.nowIndex + 1) returnnextShowData = this.localData[this.nowIndex + 1]// 下一张的数据newDom.style.left = '100%'}// 新元素的内部结构const innerHtml = `<div class="scrollItem" style=" display: flex;  width: 100%; height: 100%; background-color: pink;"><div class="img" style="width:50%; height:100%" ><el-image src="${nextShowData.imgUrl}"></el-image></div><div class="messBox" style=" font-size: 16px; width:50%; height:100%; background-color: skyblue; ">${nextShowData.mess}</div></div>`// 插入子元素newDom.innerHTML = innerHtmlfatherDom.appendChild(newDom)}}
}
</script>
<style lang='scss' scoped>
.container {width: 100%;height: 100%;
}.container .windows {position: relative;left: 30%;font-size: 0px;overflow: hidden;width: 40%;height: 40%;border: 1px solid red;
}.scrollBox {position: absolute;width: 100%;height: 100%;transition: all 0.5s;
}.windows .scrollItem {display: flex;width: 100%;height: 100%;background-color: pink;
}.windows .scrollItem .img {width: 50%;height: 100%;
}.windows .messBox {font-size: 16px;width: 50%;height: 100%;background-color: skyblue;
}
</style>

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

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

相关文章

开源模型应用落地-FastAPI-助力模型交互-进阶篇(四)

一、前言 FastAPI 的高级用法可以为开发人员带来许多好处。它能帮助实现更复杂的路由逻辑和参数处理&#xff0c;使应用程序能够处理各种不同的请求场景&#xff0c;提高应用程序的灵活性和可扩展性。 在数据验证和转换方面&#xff0c;高级用法提供了更精细和准确的控制&#…

科技赋能,智慧粮仓视频综合管理方案助力粮食安全

一、背景需求 随着科技的快速发展&#xff0c;智慧化、智能化管理已成为各行各业的重要发展方向。粮食仓储作为国家粮食安全战略的重要组成部分&#xff0c;其管理的科学性和智能化水平直接关系到粮食的存储安全、品质保障和运营效率。 因此&#xff0c;TSINGSEE青犀提出一套…

Linux文件和目录常用命令

1.操作命令 查看目录内容 ls 切换目录 cd 创建和删除操作 touch rm mkdir 拷贝和移动文件 cp mv 查看文件内容 cat more grep 其他 echo 重定向 > 和 >> 管道 | 1.1 终端实用技巧 1>自动补全 在敲出 文件/目录/命令 的前几个字母之后&#xff0c;按下…

pdf怎么压缩的小一点?PDF压缩变小的6种方法(2024全新)

pdf怎么压缩的小一点&#xff1f;首先&#xff0c;PDF文件可以进行压缩。职场文档传阅还是比较建议PDF压缩&#xff0c;PDF文件可以无障碍访问&#xff0c;保持原始文本、图像和表格&#xff0c;无需担心展示效果差异等等优势&#xff0c;成为我们日常工作中不可或缺的一部分。…

一种优雅的用于Node.js的MySQL包的异步事务函数封装方式

引言 众所周知&#xff0c;Node.js中的 mysql 包提供的接口均为异步接口&#xff0c;这样虽然有效提升了性能&#xff0c;但在大多数业务场景中&#xff0c;我们需要将其转为同步方式使用。 对于常规的单次查询&#xff0c;可以使用一个简单的Promise完成如下封装&#xff1a;…

阿里云盾占用资源的问题AliYunDun,AliYunDunUpdate

目录 1.关闭AliYunDunUpdate&#xff0c;AliYunDun&#xff0c;AliYunDunMonitor。 2.发现报错如下 3.打开阿里云安全中心控制台 4.成功解决 2.开启云盾命令 “如果您在解决类似问题时也遇到了困难&#xff0c;希望我的经验分享对您有所帮助。如果您有任何疑问或者想分享您…

哪种SSL证书可以快速签发保护http安全访问?

用户访问网站&#xff0c;经常会遇到访问http网页时&#xff0c;提示网站不安全或者不是私密连接的提示&#xff0c;因为http是使用明文传输&#xff0c;数据传输中可能被篡改&#xff0c;数据不被保护&#xff0c;通常需要SSL证书来给数据加密。 SSL证书的签发速度&#xff0…

使用JWT双令牌机制进行接口请求鉴权

在前后端分离的开发过程中&#xff0c;前端发起请求&#xff0c;调用后端接口&#xff0c;后端在接收请求时&#xff0c;首先需要对收到的请求鉴权&#xff0c;在这种情况先我们可以采用JWT机制来鉴权。 JWT有两种机制&#xff0c;单令牌机制和双令牌机制。 单令牌机制服务端…

工作记录7.19

xss应当用filter进行过滤&#xff0c; null值校验 版本升级的时候&#xff0c;往往会发生代码冲突&#xff0c;这时候找到错误点&#xff0c;注释掉再看。 springboot2.7.15与springfox的Swagger3.0产生路径冲突 Swagger3.0 与spring boot2.7x 整合避免swagger2.0与boot2.7冲突…

环信IM x 亚马逊云科技,助力出海企业实现可靠通讯服务

随着全球化进程的加速&#xff0c;越来越多的企业选择出海&#xff0c;拓展国际市场。然而&#xff0c;面对不同国家和地区的用户&#xff0c;企业在即时通讯方面遇到了诸多挑战。为了帮助企业克服这些困难&#xff0c;环信IM与亚马逊云科技强强联手&#xff0c;共同推出了一套…

LDR6020:重塑iPad一体式有线键盘体验的创新力量

在移动办公与娱乐日益融合的时代&#xff0c;iPad凭借其强大的性能和便携性&#xff0c;成为了众多用户不可或缺的生产力工具。然而&#xff0c;为了进一步提升iPad的使用体验&#xff0c;一款高效、便捷的键盘成为了不可或缺的配件。今天&#xff0c;我们要介绍的&#xff0c;…

关于黑马商城微服务拆分

1.拆分流程 大差不差分为 创建module-依赖-启动类-配置yml文件-抽取代码-数据库-配置启动项-测试 2.微服务的好处 在测试的时候明显感觉到微服务的好处 不用启动所有的项目 只是单纯一个模块比如支付就可以自己调试 非常便捷而且易开发 抽取的公共模块api也不用启动就能测试 …

机器学习-20-基于交互式web应用框架streamlit的基础使用教程

参考简洁而优雅地展示你的算法和数据——streamlit教程(一) 原理介绍与布局控制 参考Streamlit 讲解专栏(二):搭建第一个应用 Streamlit 讲解专栏(三):两种方案构建多页面 Streamlit 讲解专栏(五):探索强大而灵活的 st.write() 函数 1 streamlit 1.1 运行原理 im…

免费缺陷管理工具深度评测与使用心得

国内外主流的10款缺陷跟踪工具对比&#xff1a;PingCode、Worktile、滴答清单、CalendarTask、专注清单、Todo清单、Jira、Bugzilla、MantisBT、Redmine。 在寻找合适的缺陷管理工具时&#xff0c;很多团队面临一个共同的挑战&#xff1a;如何在有限的预算内找到既高效又易于使…

探索光影魔法:WebKit中的CSS文本阴影效果

探索光影魔法&#xff1a;WebKit中的CSS文本阴影效果 CSS文本阴影&#xff08;Text Shadow&#xff09;是Web设计中一种创造视觉深度和强调文本的流行技术。它通过在文本下方添加模糊的阴影&#xff0c;为网页元素增添立体感。WebKit作为许多现代浏览器的渲染引擎&#xff0c;…

深入浅出WebRTC—ALR

ALR&#xff08;Application Limited Region&#xff09;指的是网络传输过程中&#xff0c;由于应用层的限制&#xff08;而非网络拥塞&#xff09;导致带宽未被充分利用的情况。在这种情况下&#xff0c;应用层可能因为处理能力、手动配置或其他因素无法充分利用可用带宽&…

Spring Authorization Server 自定义 OAuth2 密码模式返回数据结构优化

前言 对接了自定义密码模式&#xff0c;但是返回的数据结构不符合要求 我们需要改成下面格式 开始 我假设你已经对接好了自定义密码功能&#xff0c;不会的话看下面文章 Spring Authorization Server 1.1 扩展实现 OAuth2 密码模式与 Spring Cloud 的整合实战&#xff08;上…

ChatGPT对话:Windows如何将Python训练模型转换为TensorFlow.js格式

【编者按】编者目前正在做手机上的人工智能软件&#xff0c;第一次做这种工作&#xff0c;从一些基本工作开始与ChatGPT交流。对初学者应该有帮助。 一天后修改文章补充内容&#xff1a; 解决TensorFlow 2.X与TensorFlow Decision Forests版本冲突问题&#xff1a; 在使用tens…

像 MvvmLight 一样使用 CommunityToolkit.Mvvm 工具包

文章目录 简介一、安装工具包二、实现步骤1.按照MvvmLight 的结构创建对应文件夹和文件2.编辑 ViewModelLocator3.引用全局资源二、使用详情1.属性2.命令3. 消息通知4. 完整程序代码展示运行结果简介 CommunityToolkit.Mvvm 包(又名 MVVM 工具包,以前称为 Microsoft.Toolkit…

学习计算机

不要只盯着计算机语言学习&#xff0c;你现在已经学习了C语言和Java&#xff0c;暑假又规划学习Python&#xff0c;最后你掌握的就是计算机语言包而已。 2. 建议你找一门想要深挖的语言&#xff0c;沿着这个方向继续往后学习知识就行。计算机语言是学不完的&#xff0c;而未来就…