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

news2024/11/13 9:32:37

切换效果

页面结构变化

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) return
      this.readyBox('next')

      const fatherDom = document.querySelector('.windows')
      const moveDistanceX = fatherDom.offsetWidth
      const 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) return

      let 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) return
        nextShowData = this.localData[this.nowIndex - 1]
        //此处省略........,自行补充
      }
      //   下一张
      if (type === 'next') {
        // 判断当前展示列表是否合法
        if (this.localData.length <= this.nowIndex + 1) return
        nextShowData = 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 = innerHtml
      fatherDom.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.coloradmin.cn/o/1936502.html

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

相关文章

Air780E/Air780EP/Air780EQ/Air201模块遇到死机问题如何分析

Air780E/Air780EP/Air780EQ/Air201模块遇到死机问题如何分析 简介 本文档适用于合宙Air780E、Air780EP、Air780EQ、Air201 关联文档和使用工具&#xff1a; 从Ramdump里分析内存泄漏问题 无法抓底层log的情况下如何导出死机dump Luatools下载调试工具 EPAT抓取底层日志 F…

品牌媒体邀约的流程及注意事项

传媒如春雨&#xff0c;润物细无声&#xff0c;大家好&#xff0c;我是51媒体网胡老师。 品牌媒体邀约是一个复杂但重要的公关策略&#xff0c;能够帮助企业提高曝光率、树立品牌形象并传递信息。以下是品牌媒体邀约的流程及注意事项&#xff1a; 一、品牌媒体邀约流程 明确目…

Xcode如何创建多个工程

在Xcode中创建如何创建下图所示的工程呢&#xff1f;即在工程下有四个子项目&#xff0c;且四个子项目不同时运行&#xff0c;每次只运行一个。使用Visual Studio C的话不过是基操而已&#xff01; 1.首先创建工程&#xff0c;即图中的“Project” 1.1 打开Xcode&#xff0c…

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

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

使用Python爬虫下载视频源码

一、引言(●ˇ∀ˇ●) 在当今互联网时代&#xff0c;视频内容已成为人们获取信息和娱乐的重要方式。有时&#xff0c;我们可能希望将这些视频下载到本地&#xff0c;以便在没有网络的情况下观看。本文将介绍如何使用Python编写一个简单的爬虫。 二、环境准备&#x1f618; 在…

ThinkPad改安装Windows7系统的操作步骤

ThinkPad&#xff1a;改安装Windows7系统的操作步骤 一、BIOS设置 1、先重新启动计算机&#xff0c;并按下笔记本键盘上“F1”键进入笔记本的BIOS设置界面。 2、进入BIOS设置界面后&#xff0c;按下键盘上“→”键将菜单移动至“Restart“项目&#xff0c;按下键盘上“↓”按键…

pdf转换器哪个好?PDF转word工具分享

pdf转换器哪个好&#xff1f;选择PDF转换器可以极大地提升我们的工作效率与灵活性。它不仅能够轻松实现PDF文件与其他格式&#xff08;如Word、Excel、图片等&#xff09;之间的互转&#xff0c;满足多样化的文件处理需求&#xff1b;还能在保持文件内容完整性的同时&#xff0…

“信息科技风险管理”和“IT审计智能辅助”两个大模块的部分功能详细介绍:

数字风险赋能中心简介 数字风险赋能中心简介 &#xff0c;时长05:13 大家好&#xff01;我是AI主播安欣&#xff0c;我给大家介绍一下数字风险赋能中心。 大家都知道当前我国政企机构的数字化转型已经进入深水区&#xff0c;数字化转型在给我们带来大量创新红利的同时&#xf…

ForCloud全栈安全体验,一站式云安全托管试用 开启全能高效攻防

对于正处于业务快速发展阶段的企业&#xff0c;特别是大型央国企而言&#xff0c;日常的安全部署和运营管理往往横跨多家子公司&#xff0c;所面临的挑战不言而喻。尤其是在面对当前常态化的大型攻防演练任务时&#xff0c;难度更是呈“几何级数”上升&#xff1a; 合规难 众…

C++容器之vector

C vector容器 vector是可变数组。 容纳元素个数可以在运行期间变化。 std::vector 是 C 标准库中的动态数组容器&#xff0c;它提供了可变大小的数组功能&#xff0c;具有灵活性和多种强大的功能。 特点 动态大小: std::vector 可以根据需要动态增长或缩小&#xff0c;可以在…

使用VuePress-Reco快速搭建博客(保姆级)

简介&#xff1a;VuePress-Reco 一款简洁的 vuepress 博客 & 文档 主题&#xff0c;可以自由搭建自己的风格&#xff0c;比较方便简洁。 链接&#xff1a;vuepress-reco 准备环境&#xff1a; Node.Js >20.5.0&#xff0c;Npm > 10.8.2 OR Yarn > 1.22.19 注&am…

数据库系统概论:数据库系统的锁机制

引言 锁是计算机协调多个进程或线程并发访问某一资源的机制。在数据库中&#xff0c;数据作为一种共享资源&#xff0c;其并发访问的一致性和有效性是数据库必须解决的问题。锁机制通过对数据库中的数据对象&#xff08;如表、行等&#xff09;进行加锁&#xff0c;以确保在同…

数据结构-冒泡排序

1 概念 冒泡排序属于一种常见的交换排序&#xff0c;根据序列中两个元素关键字的比较结果来对换这两个记录在序列中的位置。具体操作是按顺序&#xff08;从前往后或从后往前&#xff09;两两对比元素直至本次排序结束&#xff0c;每次排序确认一个固定值&#xff08;末位或首…

windows USB 设备驱动开发-开发Type C接口的驱动程序(二)

编写 USB Type C 连接器驱动程序 在以下情况下&#xff0c;需要编写 USB Type-C 连接器驱动程序&#xff1a; 如果 USB Type-C 硬件能够处理电源输送 (PD) 状态机。 否则&#xff0c;请考虑编写 USB Type C 端口控制器驱动程序&#xff1b; 如果硬件没有嵌入式控制器。 否则&…

微信小程序 button样式设置为图片的方法

微信小程序 button样式设置为图片的方法 background-image background-size与background-repeat与border:none;是button必须的 <view style" position: relative;"><button class"customer-service-btn" style"background-image: url(./st…

[数据集][目标检测]拐杖检测数据集VOC+YOLO格式638张1类别

数据集格式&#xff1a;Pascal VOC格式YOLO格式(不包含分割路径的txt文件&#xff0c;仅仅包含jpg图片以及对应的VOC格式xml文件和yolo格式txt文件) 图片数量(jpg文件个数)&#xff1a;638 标注数量(xml文件个数)&#xff1a;638 标注数量(txt文件个数)&#xff1a;638 标注类别…

四个节点即可实现的ComfyUI批量抠图工作流

原文链接&#xff1a;ComfyUI面部修复完全指南 (chinaz.com) 下图就是批量抠图的工作流 虽然工作流很简单&#xff0c;但是我们前提还是需要安装好我们的节点 首先安装我们的抠图节点 安装 BiRefNet 所需依赖&#xff1a;timm&#xff0c;如已安装无需运行 requirements.txt…

【论文阅读】Mamba: Linear-Time Sequence Modeling with Selective State Spaces

Mamba: Linear-Time Sequence Modeling with Selective State Spaces 论文&#xff1a;[2312.00752] Mamba: Linear-Time Sequence Modeling with Selective State Spaces 作者&#xff1a;Albert Gu 和 Tri Dao&#xff0c;分别来自卡内基梅隆大学机器学习系和普林斯顿大学计…

ros笔记02--从零体验ros2中的服务通信方式

ros笔记02--从零体验ros2中的服务通信方式 介绍创建步骤注意事项说明 介绍 在ROS 2中&#xff0c;服务指的是远程过程调用&#xff0c;client调用server&#xff0c;server节点收到数据后计算出结果并返回给client. 服务通常期望能快速返回&#xff0c;因此不应当用于处理长时…

spark 动态资源分配dynamicAllocation

动态资源分配&#xff0c;主要是spark在运行中可以相对合理的分配资源。 初始申请的资源远超实际需要&#xff0c;减少executor初始申请的资源比实际需要少很多&#xff0c;增多executorSpark运行多个job&#xff0c;这些job所需资源有的多有的少&#xff0c;动态调整executor…