首页 > 其他分享 >[vue] 大数据优化之虚拟滚动

[vue] 大数据优化之虚拟滚动

时间:2024-09-02 11:15:09浏览次数:8  
标签:vue const value 滚动条 startIndex 虚拟 extraRenderLen 滚动 ref

<template>
  <div class="container" ref="scrollRef" @scroll="scroll">
    <div
      class="plc"
      :style="'height: ' + list.length * 60 + 'px;padding-top: ' + paddingTop + 'px'"
    >
      <div class="item" v-for="item in renderList" :key="item.id">{{ item.str }}</div>
    </div>
  </div>
</template>

<script setup>
const list = ref([]);
const paddingTop = ref(0);
const renderLen = Math.floor(window.innerHeight / 60);
const extraRenderLen = 10;
const startIndex = ref(0);
const renderList = computed(() => {
  return list.value.slice(
    startIndex.value,
    startIndex.value + renderLen + extraRenderLen * 2
  );
});

function initData() {
  for (let i = 0; i < 10000; i++) {
    list.value.push({
      str: i,
      id: i,
    });
  }
}

const scrollRef = ref();
function scroll() {
  const top = scrollRef.value.scrollTop;
  // 卷进去了多少条数据
  const jump = Math.floor(top / 60);
  startIndex.value = jump - extraRenderLen > 0 ? jump - extraRenderLen : 0;
  paddingTop.value = startIndex.value * 60;
}

initData();
</script>

<style lang="scss" scoped>
.container {
  height: 100vh;
  overflow-y: scroll;

  .plc {
    .item {
      height: 60px;
      background: pink;
      border: 4px solid #fff;
      border-radius: 10px;
      font-size: 40px;
    }
  }
}
</style>

案例为vue SFC, 使用了 unplugin-auto-import 插件,所以 没有引入 ref computed 等函数

 

本来想用plc的固定高度撑开 Container 容易, 实现滚动条的自适应计算, 结果设置 overflow-y: scroll 之后, 滚动条直接不显示了

所以, 预计, 只在 item 外面套一个盒子, 也能达到这种 无滚动条 的 虚拟滚动列表 了

 

如果有什么解决办法, 欢迎提出来!!!

 

 

结果如图

 

标签:vue,const,value,滚动条,startIndex,虚拟,extraRenderLen,滚动,ref
From: https://www.cnblogs.com/fmg0224/p/18392349

相关文章

  • Vue基础
    目录Vue介绍入门案例Vue指令页面赋值(v-html)双向绑定(v-model)属性绑定(v-bind)列表遍历(v-for)条件判断(v-if/v-show)事件绑定(v-on)axios前端工程化安装NodeJS创建项目项目介绍API风格选项式API组合式API组件化局部注册组件全局注册组件ElementPlus快......
  • SprinBoot+Vue校园活动报名微信小程序的设计与实现
    目录1项目介绍2项目截图3核心代码3.1Controller3.2Service3.3Dao3.4application.yml3.5SpringbootApplication3.5Vue3.6uniapp代码4数据库表设计5文档参考6计算机毕设选题推荐7源码获取1项目介绍博主个人介绍:CSDN认证博客专家,CSDN平台Java领域优......
  • vue 批量自动引入并注册组件或路由
    有时候有大量的组件.vue后缀的,或.js,或.ts文件,需要一个个的手动引入很麻烦,那么你可以尝试这样创建一个index.js本项目使用vue3.x,vue2.x也可以照样用;这里在components里面创建了一个idnex.js文件require.context可以读取文件,第一个参数是指当前文件夹,第二个参......
  • Red Hat 9 — Red Hat 9.4Linux系统 虚拟机安装【保姆级教程】
    Mac分享吧文章目录效果一、下载软件二、安装软件与配置1、安装2、配置三、查看基本信息安装完成!!!效果一、下载软件下载软件地址:www.macfxb.cn二、安装软件与配置1、安装2、配置三、查看基本信息安装完成!!!......
  • Docker网络是如何进行虚拟化的
    Docker网络是如何进行虚拟化的大家好,我是comi,今天为大家讲解一下docker网络的相关知识。docker在被安装进我们的电脑的时候,就会自动生成docker自己的网络,大家可以输入ifconfig尝试一下,docker0即自动生成的桥接网络​​docker自带命令可以查询docker的网络的整体信息sudodock......
  • 基于SpringBoot+Vue+uniapp的医院在线挂号预约系统的+jsp的详细设计和实现(源码+lw+部
    文章目录前言详细视频演示具体实现截图技术栈后端框架SpringBoot前端框架Vue持久层框架MyBaitsPlus系统测试系统测试目的系统功能测试系统测试结论为什么选择我代码参考数据库参考源码获取前言......
  • Docker网络是如何进行虚拟化的
    Docker网络是如何进行虚拟化的大家好,我是comi,今天为大家讲解一下docker网络的相关知识。docker在被安装进我们的电脑的时候,就会自动生成docker自己的网络,大家可以输入ifconfig尝试一下,docker0即自动生成的桥接网络​​docker自带命令可以查询docker的网络的整体信息sudodock......
  • Vue, Avoided redundant navigation to current location: "/login".
    VueAvoidedredundantnavigationtocurrentlocation:"/login".=================================报错解释:这个错误是在使用Vue.js框架时,发生的一个警告,表示尝试进行一个冗余的导航到当前位置(即“/login”路径)。这通常发生在VueRouter中,当你尝试通过编程方式导航到当前正......
  • 有没有办法在vue中设置route prop?
    在Vue中,你可以通过路由配置对象来设置路由的prop。以下是一个示例:constroutes=[{path:'/your-path',component:YourComponent,props:true//启用路由的prop传递}];在上述示例中,我们将props属性设置为true,这意味着路由将把路由参数作为属性传......
  • 从Vue的Weex迁移到Rax Weex
    据说:rax几乎没啥使用文档,有问题直接查询react官方文档,屡试屡爽目前没有实践过,先存下一言生成的文档:从Vue的Weex迁移到RaxWeex涉及到从一种前端框架(Vue)到另一种框架(Rax)的转换,同时保持与Weex的兼容性。由于Weex本身是一个跨平台的移动开发框架,支持Vue和Rax等多种前端框架,迁移......