发帖
翼度科技»论坛 › 编程开发 › JavaScript › 查看内容

前端虚拟滚动列表实现代码(vue虚拟列表)

神匠

8

主题

8

帖子

24

积分

新手上路

Rank: 1

积分
24
显示全部楼层
前言

方法一利用浏览器原生api去实现，可以实现不等高的列表虚拟滚动，intersectionObserver 多用于图片懒加载，虚拟滚动列表
方法二通过监听滚动条的位置，去计算显示的内容，这里需要列表等高，当然不等高也可以计算，稍微改改

前端虚拟滚动列表（方法一：利用IntersectionObserver api 简单）


  • IntersectionObserver可以用来自动监听元素是否进入了设备的可视区域之内，而不需要频繁的计算来做这个判断。由于可见（visible）的本质是，目标元素与视口产生一个交叉区，所以这个 API 叫做"交叉观察器"IntersectionObserver 方案多用于图片懒加载或者列表虚拟滚动
IntersectionObserver 是浏览器原生提供的构造函数，接受两个参数： callback：可见性发现变化时的回调函数 option：配置对象（可选）。构造函数的返回值是一个观察器实例。实例一共有4个方法：

  • observe：开始监听特定元素
  • unobserve：停止监听特定元素
  • disconnect：关闭监听工作
  • takeRecords：返回所有观察目标的对象数组
  • callback 参数
    目标元素的可见性变化时，就会调用观察器的回调函数callback。
    callback一般会触发两次。一次是目标元素刚刚进入视口，另一次是完全离开视口。
  1. const io = new IntersectionObserver((changes, observer) => {
  2.   console.log(changes);
  3.   console.log(observer);
  4. });
复制代码

  • options


  • threshold: 决定了什么时候触发回调函数。它是一个数组，每个成员都是一个门槛值，默认为[0]，即交叉比例（intersectionRatio）达到0时触发回调函数。用户可以自定义这个数组。比如，[0, 0.25, 0.5, 0.75, 1]就表示当目标元素 0%、25%、50%、75%、100% 可见时，会触发回调函数。
  • root: 用于观察的根元素，默认是浏览器的视口，也可以指定具体元素，指定元素的时候用于观察的元素必须是指定元素的子元素
  • rootMargin: 用来扩大或者缩小视窗的的大小，使用css的定义方法，10px 10px 30px 20px表示top、right、bottom 和 left的值
    ————————————————
这里是后面补充的简单还原了下面方法二的例子，重点在60行，从哪儿看就可以
  1. <template>
  2.   <div class="big-box">
  3.     <div class="download-box txt" id="scrollable-div">
  4.       <div v-for="(item, index) in props.seqText" :key="index" class="line-box">
  5.         <template v-if="index === 0 && start === 0">
  6.           <div :class="{ 'text-title': props.collapsed, 'text-title-samll': !props.collapsed }">
  7.             {{ item }}
  8.           </div>
  9.         </template>
  10.         <template v-else>
  11.           <div :class="{ 'text-number': props.collapsed, 'text-number-samll': !props.collapsed }">
  12.             {{ calLine(item, index + start) }}
  13.           </div>
  14.           <div
  15.             :class="{ 'text-box': props.collapsed, 'text-box-samll': !props.collapsed }"
  16.             :data="item"
  17.           >
  18.             ''
  19.           </div>
  20.           <div :class="{ 'text-number2': props.collapsed, 'text-number2-samll': !props.collapsed }">
  21.             {{ endRow(item, index + start) }}
  22.           </div>
  23.         </template>
  24.       </div>
  25.     </div>
  26.   </div>

  28.   <SearchBox :againFind="againFind" />
  29. </template>

  31. <script lang="ts" setup>
  32. import { watch, onMounted, PropType, reactive, ref } from 'vue';

  34. import SearchBox from '/@/components/SearchBox/index.vue';
  35. import { message } from 'ant-design-vue';

  37. const props = defineProps({
  38.   collapsed: {
  39.     type: Boolean,
  40.     default: true,
  41.   },
  42.   seqText: {
  43.     type: Array as PropType<string[]>,
  44.     default: [''],
  45.   },
  46. });
  47. let width = 100;
  48. const geneTexts: Array<string> = [];
  49. const data = reactive({
  50.   geneTexts,
  51. });

  53. const calLine = (item: any, index: number) => {
  54.   return width * (index - 1) + 1;
  55. };
  56. const endRow = (item: any, index: number) => {
  57.   return width * index;
  58. };

  60. //  这里是核心要点
  61. const io = new IntersectionObserver(
  62.   (entries) => {
  63.     console.log(entries);
  64.     for (const entry of entries) {
  65.       if (entry.isIntersecting) {
  66.         const elTxt = entry.target;
  67.         // console.log(elTxt.getAttribute('data'));
  68.         elTxt.innerHTML = elTxt.getAttribute('data');
  69.         io.unobserve(elTxt);
  70.       }
  71.     }
  72.   },
  73.   {
  74.     root: document.getElementById('scrollable-div'),
  75.     // rootMargin: 0,
  76.     threshold: 0.5,
  77.   },
  78. );
  79. setTimeout(() => {
  80.   const elList = document.querySelectorAll('.text-box');
  81.   console.log(elList);
  82.   elList.forEach((element) => {
  83.     io.observe(element);
  84.   });
  85. }, 1000);

  87. const againFind = ref(1);

  89. let start = ref(0);
  90. </script>

  92. <style lang="less" scoped>
  93. // @import '/@/assets/styles/views/medaka.less';
  94. .big-box {
  95.   background: #282c34;
  96.   padding: 30px 20px;
  97.   height: 870px;
  98. }
  99. .download-box {
  100.   width: 100%;
  101.   // padding: 0px 20px;
  102.   // outline: 1px solid rgb(17, 0, 255);
  103.   overflow: hidden;

  105.   .line-box {
  106.     .flex-type(flex-start);
  107.     height: 30px;
  108.   }

  110.   &.txt {
  111.     background: #282c34;
  112.     color: #fff;
  113.     height: 810px;
  114.     overflow: auto;

  116.     .el-row {
  117.       display: flex;
  118.       align-items: center;
  119.       margin-bottom: 10px;
  120.       margin: auto;
  121.       font-size: 22px;
  122.     }
  123.   }
  124. }

  126. @media screen and (min-width: 1842px) {
  127.   .text-box-samll {
  128.     letter-spacing: 1.5px;
  129.     font-size: 15px;
  130.   }

  132.   .text-number-samll {
  133.     min-width: 60px;
  134.     font-size: 15px;
  135.   }

  137.   .text-number2-samll {
  138.     margin-left: 20px;
  139.     min-width: 60px;
  140.     font-size: 15px;
  141.   }

  143.   .text-title-samll {
  144.     font-size: 15px;
  145.   }

  147.   .text-box {
  148.     font-size: 22px;
  149.     // letter-spacing: 3px;
  150.   }

  152.   .text-number {
  153.     min-width: 100px;
  154.     font-size: 22px;
  155.   }

  157.   .text-number2 {
  158.     margin-left: 20px;
  159.     min-width: 100px;
  160.     font-size: 22px;
  161.   }

  163.   .text-title {
  164.     font-size: 22px;
  165.   }
  166. }
  167. @media screen and (min-width: 1600px) and (max-width: 1841px) {
  168.   .text-box-samll {
  169.     font-size: 15px;
  170.   }

  172.   .text-number-samll {
  173.     min-width: 40px;
  174.     font-size: 15px;
  175.   }

  177.   .text-number2-samll {
  178.     margin-left: 20px;
  179.     min-width: 40px;
  180.     font-size: 15px;
  181.   }

  183.   .text-title-samll {
  184.     font-size: 15px;
  185.   }

  187.   .text-box {
  188.     font-size: 20px;
  189.     // letter-spacing: 1.2px;
  190.   }

  192.   .text-number {
  193.     min-width: 60px;
  194.     font-size: 20px;
  195.   }

  197.   .text-number2 {
  198.     margin-left: 20px;
  199.     min-width: 60px;
  200.     font-size: 20px;
  201.   }

  203.   .text-title {
  204.     font-size: 20px;
  205.   }
  206. }

  208. @media screen and (min-width: 1443px) and (max-width: 1599px) {
  209.   .text-box-samll {
  210.     font-size: 13px;
  211.   }

  213.   .text-number-samll {
  214.     min-width: 40px;
  215.     font-size: 13px;
  216.   }

  218.   .text-number2-samll {
  219.     margin-left: 20px;
  220.     min-width: 40px;
  221.     font-size: 13px;
  222.   }

  224.   .text-title-samll {
  225.     font-size: 13px;
  226.   }

  228.   .text-box {
  229.     font-size: 18px;
  230.     // letter-spacing: 1.2px;
  231.   }

  233.   .text-number {
  234.     min-width: 60px;
  235.     font-size: 15px;
  236.   }

  238.   .text-number2 {
  239.     margin-left: 20px;
  240.     min-width: 60px;
  241.     font-size: 18px;
  242.   }

  244.   .text-title {
  245.     font-size: 18px;
  246.   }
  247. }

  249. @media screen and (max-width: 1442px) {
  250.   .text-box-samll {
  251.     font-size: 11px;
  252.   }

  254.   .text-number-samll {
  255.     min-width: 40px;
  256.     font-size: 11px;
  257.   }

  259.   .text-number2-samll {
  260.     margin-left: 20px;
  261.     min-width: 40px;
  262.     font-size: 11px;
  263.   }

  265.   .text-title-samll {
  266.     font-size: 11px;
  267.   }

  269.   .text-box {
  270.     font-size: 16px;
  271.     // letter-spacing: 1.2px;
  272.   }

  274.   .text-number {
  275.     min-width: 60px;
  276.     font-size: 15px;
  277.   }

  279.   .text-number2 {
  280.     margin-left: 20px;
  281.     min-width: 60px;
  282.     font-size: 16px;
  283.   }

  285.   .text-title {
  286.     font-size: 16px;
  287.   }
  288. }
  289. </style>
复制代码
前端虚拟滚动列表（方法二：监听滚动计算 麻烦）

在大型的企业级项目中经常要渲染大量的数据，这种长列表是一个很普遍的场景，当列表内容越来越多就会导致页面滑动卡顿、白屏、数据渲染较慢的问题；大数据量列表性能优化，减少真实dom的渲染
看图：绿色是显示区域，绿色和蓝色中间属于预加载：解决滚动闪屏问题；大致了解了流程在往下看；


实现效果：

先说一下你看到这么多真实dom节点是因为做了预加载，减少滚动闪屏现象，这里写了300行，可以根据实际情况进行截取


实现思路：

虚拟列表滚动大致思路：两个div容器
  1.   外层：外部容器用来固定列表容器的高度，同时生成滚动条
  2.   内层：内部容器用来装元素，高度是所有元素高度的和
  3.   外层容器鼠标滚动事件  dom.scrollTop 获取滚动条的位置
  4.   根据每行列表的高以及当前滚动条的位置，利用slice() 去截取当前需要显示的内容
  5.   重点：滚动条的高度是有内层容器的paddingBottom 和 paddingTop 属性顶起来了，确保滚动条位置的准确性
  6.   这里鼠标上下滚动会出现闪屏问题：解决方案如下：
  7.       方案一：  预加载：
  8.                     向下预加载：                        比如div滚动区域显示30行，就预加载 300行( 即这里 slice(startIndex,startIndex + 300) )，
  9.                     向上预加载：                        在滚动监听事件函数中（computeRow）判断inner的paddingTop和paddingBottom即可
  10.                     当然这里的download-box的padding有30px像素，在加一个div，overflow：hidded就解决了
  11.       方案二：缩小滚动范围或者节流时间缩短，这里写的500ms
复制代码
具体代码
  1.   <template>
  2.     <div class="enn">
  3.       <div class="download-box txt" id="scrollable-div" @scroll="handleScroll">
  4.         <div id="inner">
  5.           <div v-for="(item, index) in data2" :key="index" class="line-box">
  6.             <div :class="{ 'text-box': props.collapsed, 'text-box-samll': !props.collapsed }">
  7.               {{ item }}
  8.             </div>
  9.           </div>
  10.         </div>
  11.       </div>
  12.     </div>
  13.   </template>

  15.   <script lang="ts" setup>
  16.   import { onMounted, PropType, ref } from 'vue';

  18.   import { useText } from './hooks/useText';

  20.   const props = defineProps({
  21.     baseData: {
  22.       type: Object as PropType<{
  23.         taskId: string;
  24.         barcodeName: string;
  25.       }>,
  26.       default: {},
  27.     },
  28.     collapsed: {
  29.       type: Boolean,
  30.       default: true,
  31.     },
  32.     type: {
  33.       type: Boolean,
  34.       default: false,
  35.     },
  36.   });

  38.   const { data } = useText(props.type);

  40.   //  这里大数据量数组是  data.geneTexts

  42.   /**
  43.    * 虚拟列表滚动大致思路：两个div容器
  44.    *
  45.    *    外层：外部容器用来固定列表容器的高度，同时生成滚动条
  46.    *
  47.    *    内层：内部容器用来装元素，高度是所有元素高度的和
  48.    *
  49.    *    外层容器鼠标滚动事件  dom.scrollTop 获取滚动条的位置
  50.    *
  51.    *    根据每行列表的高以及当前滚动条的位置，利用slice() 去截取当前需要显示的内容
  52.    *
  53.    *    重点：滚动条的高度是有内层容器的paddingBottom 和 paddingTop 属性顶起来了，确保滚动条位置的准确性
  54.    *
  55.    *    这里鼠标上下滚动会出现闪屏问题：解决方案如下：
  56.    *
  57.    *        方案一：  预加载：
  58.    *
  59.    *                      向下预加载：
  60.    *                          比如div滚动区域显示30行，就预加载 300行( 即这里 slice(startIndex,startIndex + 300) )，
  61.    *
  62.    *                      向上预加载：
  63.    *                          在滚动监听事件函数中（computeRow）判断inner的paddingTop和paddingBottom即可
  64.    *
  65.    *                      当然这里的download-box的padding有30px像素，在加一个div，overflow：hidded就解决了
  66.    *
  67.    *        方案二：缩小滚动范围或者节流时间缩短，这里写的500ms
  68.    *
  69.    *
  70.    */

  72.   let timer_throttle: any;
  73.   const throttle = (func: Function, wait?: number) => {
  74.     wait = wait || 500;
  75.     if (!timer_throttle) {
  76.       timer_throttle = setTimeout(() => {
  77.         func.apply(this);
  78.         timer_throttle = null;
  79.       }, wait);
  80.     }
  81.   };

  83.   // 鼠标滚动事件
  84.   const handleScroll = (event: any) => throttle(computeRow, 100);
  85.   // 计算当前显示tab
  86.   const computeRow = () => {
  87.     // console.log('距离顶部距离', window.scrollY, geneTexts);

  89.     let scrollableDiv = document.getElementById('scrollable-div');
  90.     let topPosition = scrollableDiv.scrollTop;
  91.     let leftPosition = scrollableDiv.scrollLeft;
  92.     console.log('垂直滚动位置:', topPosition, '水平滚动位置:', leftPosition);

  94.     const startIndex = Math.max(0, Math.floor(topPosition / 30));
  95.    
  96.     const endIndex = startIndex + 300;
  97.     data2.value = data.geneTexts.slice(startIndex, endIndex);

  99.     let inner = document.getElementById('inner');
  100.     if (topPosition < 2700) {
  101.       // 向上预计加载，这里判断了三个高度，可以多判断几个，增加流畅度
  102.       inner.style.paddingTop = topPosition + 'px';
  103.       inner.style.paddingBottom = (data.geneTexts.length + 2) * 30 - topPosition + 'px';
  104.     } else if (topPosition + data2.value.length * 30 >= data.geneTexts.length * 30) {
  105.       // 这里 9000 是 内层div的高度 30 * 300   理解div高度是 padding+div内容高度
  106.       inner.style.paddingTop = topPosition - 900 + 'px'; //900 是div的高度
  107.       inner.style.paddingBottom = 0 + 'px';
  108.     } else {
  109.       inner.style.paddingTop = topPosition - 2700 + 'px';
  110.       inner.style.paddingBottom = (data.geneTexts.length + 2) * 30 + 2700 - topPosition + 'px';
  111.     }
  112.   };
  113.   const data2 = ref([]);
  114.   const init = () => {
  115.     data2.value = data.geneTexts.slice(0, 300);
  116.     let inner = document.getElementById('inner');
  117.     inner.style.paddingTop = 0 + 'px';
  118.     inner.style.paddingBottom = (data.geneTexts.length + 2) * 30 - 900 + 'px';
  119.   };
  120.   </script>

  122.   <style lang="less" scoped>
  123.   .button-box {
  124.     margin-bottom: 25px;
  125.     .flex-type(flex-end);

  127.     :deep(.ant-btn) {
  128.       margin-left: 10px;
  129.     }
  130.   }
  131.   .enn {
  132.     background: #282c34;
  133.     outline: 1px solid red;
  134.     padding: 30px 20px;
  135.     height: 960px;
  136.   }
  137.   .download-box {
  138.     width: 100%;
  139.     // padding: 30px 20px;
  140.     outline: 1px solid rgb(17, 0, 255);
  141.     background-color: #fff;
  142.     overflow: hidden;

  144.     .line-box {
  145.       .flex-type(flex-start);
  146.       height: 30px;
  147.     }

  149.     &.txt {
  150.       background: #282c34;
  151.       color: #fff;
  152.       height: 900px;
  153.       overflow: auto;
  154.     }
  155.   }
  156.   </style>
复制代码
替代方案

上面是自己写的，github上面还有好多插件可以用，但各有优劣，根据自己需求选择
如：
vue-virtual-scroller
https://github.com/Akryum/vue-virtual-scroller/tree/0f2e36248421ad69f41c9a08b8dcf7839527b8c2
vue-virt-list
vue-draggable-virtual-scroll-list
virtual-list
自己找吧，我就不一一列举了，看图
  1. <template>
  2.   <br />
  3.   <div>
  4.     <Table
  5.       :columns="tableConfig.columns"
  6.       :data="tableConfig.totalData"
  7.       :loading="tableConfig.loading"
  8.       :pagination="false"
  9.     ></Table>
  10.   </div>
  11.   <br />

  13.   <div class="button-box">
  14.     <a-select
  15.       v-model:value="selection"
  16.       placeholder="请选择序列"
  17.       :options="seqOptions"
  18.       @change="
  19.         (selection:string) => handleChangeSeq(baseData.taskId, baseData.barcodeName, width, selection)
  20.       "
  21.     ></a-select>
  22.     <a-button type="primary" @click="handleClickExport()">导出所有序列</a-button>
  23.     <a-button type="primary" @click="modalConfig.visible = true">导出当前序列</a-button>
  24.   </div>
  25.   <!-- <SeqText :collapsed="props.collapsed" :seqText="data.geneTexts" /> -->
  26.   <div class="enn">
  27.     <div class="download-box txt" id="scrollable-div" @scroll="handleScroll">
  28.       <div id="inner">
  29.         <div v-for="(item, index) in data2" :key="index" class="line-box">
  30.           <template v-if="index === 0 && start === 0">
  31.             <div :class="{ 'text-title': props.collapsed, 'text-title-samll': !props.collapsed }">
  32.               {{ item }}
  33.             </div>
  34.           </template>
  35.           <template v-else>
  36.             <div :class="{ 'text-number': props.collapsed, 'text-number-samll': !props.collapsed }">
  37.               {{ calLine(item, index + start) }}
  38.             </div>
  39.             <div :class="{ 'text-box': props.collapsed, 'text-box-samll': !props.collapsed }">
  40.               {{ item }}
  41.             </div>
  42.             <div
  43.               :class="{ 'text-number2': props.collapsed, 'text-number2-samll': !props.collapsed }"
  44.             >
  45.               {{ endRow(item, index + start) }}
  46.             </div>
  47.           </template>
  48.         </div>
  49.       </div>
  50.     </div>
  51.   </div>
  52.   <br />

  54.   <a-modal
  55.     title="导出文件"
  56.     :visible="modalConfig.visible"
  57.     @ok="handleExport(data.geneTexts)"
  58.     @cancel="modalConfig.visible = false"
  59.   >
  60.     <div class="form-box">
  61.       <a-form>
  62.         <a-form-item label="自定义文件名">
  63.           <a-input v-model:value="modalConfig.name" placeholder="请输入自定义文件名"></a-input>
  64.         </a-form-item>
  65.       </a-form>
  66.     </div>
  67.   </a-modal>
  68. </template>

  70. <script lang="ts" setup>
  71. import { defineComponent, onMounted, PropType, ref } from 'vue';

  73. import Table from '/@/components/table/sTable.vue';
  74. import SeqText from '/@/components/SeqText/index.vue';

  76. import { useText, useTable } from './hooks/useText';
  77. import { useModal } from './hooks/useModal';
  78. import { serverAddress } from '/@/serve/index';
  79. import { download, downloadTxt } from '/@/libs/utils/download';

  81. const props = defineProps({
  82.   /**
  83.    * 基础数据
  84.    */
  85.   baseData: {
  86.     type: Object as PropType<{
  87.       taskId: string;
  88.       barcodeName: string;
  89.     }>,
  90.     default: {},
  91.   },
  92.   collapsed: {
  93.     type: Boolean,
  94.     default: true,
  95.   },
  96.   type: {
  97.     type: Boolean,
  98.     default: false,
  99.   },
  100. });

  102. let width = 100;
  103. const { taskId, barcodeName } = props.baseData;
  104. const { data, getMedaka, getAvailableSeq, handleChangeSeq, seqOptions, selection } = useText(
  105.   props.type,
  106. );
  107. const { tableConfig, getTable } = useTable(props.type);

  109. const VITE_APP_URL = serverAddress();
  110. const { modalConfig, handleExport } = useModal();
  111. const handleClickExport = () => {
  112.   let path = '';
  113.   if (props.type) {
  114.     path = VITE_APP_URL + `outputs/${taskId}/fastq_analysis/${barcodeName}/ragtag.fasta`;
  115.   } else {
  116.     path =
  117.       VITE_APP_URL + `outputs/${taskId}/fastq_analysis/${barcodeName}/${barcodeName}.final.fasta`;
  118.   }

  120.   download(path, '.fasta');
  121. };
  122. const calLine = (item: any, index: number) => {
  123.   return width * (index - 1) + 1;
  124. };
  125. const endRow = (item: any, index: number) => {
  126.   return width * index;
  127. };
  128. onMounted(() => {
  129.   getAvailableSeq(taskId, barcodeName).then(() => {
  130.     if (seqOptions.value.length > 0) {
  131.       getMedaka(taskId, barcodeName, width, seqOptions.value[0].value).then(() => init());
  132.       // getMedaka(taskId, barcodeName, width);
  133.     }
  134.   });
  135.   getTable(taskId, barcodeName);
  136. });

  138. /**
  139. * 虚拟列表滚动大致思路：两个div容器
  140. *
  141. *    外层：外部容器用来固定列表容器的高度，同时生成滚动条
  142. *
  143. *    内层：内部容器用来装元素，高度是所有元素高度的和
  144. *
  145. *    外层容器鼠标滚动事件  dom.scrollTop 获取滚动条的位置
  146. *
  147. *    根据每行列表的高以及当前滚动条的位置，利用slice() 去截取当前需要显示的内容
  148. *
  149. *    重点：滚动条的高度是有内层容器的paddingBottom 和 paddingTop 属性顶起来了，确保滚动条位置的准确性
  150. *
  151. *    这里鼠标上下滚动会出现闪屏问题：解决方案如下：
  152. *
  153. *        方案一：  预加载：
  154. *
  155. *                      向下预加载：
  156. *                          比如div滚动区域显示30行，就预加载 300行( 即这里 slice(startIndex,startIndex + 300) )，
  157. *  
  158. *                      向上预加载：
  159. *                          在滚动监听事件函数中（computeRow）判断inner的paddingTop和paddingBottom即可
  160. *  
  161. *                      当然这里的download-box的padding有30px像素，在加一个div，overflow：hidded就解决了
  162. *
  163. *        方案二：缩小滚动范围或者节流时间缩短，这里写的500ms
  164. *
  165. *
  166. */

  168. let timer_throttle: any;
  169. const throttle = (func: Function, wait?: number) => {
  170.   wait = wait || 500;
  171.   if (!timer_throttle) {
  172.     timer_throttle = setTimeout(() => {
  173.       func.apply(this);
  174.       timer_throttle = null;
  175.     }, wait);
  176.   }
  177. };
  178. let start = ref(0);
  179. // 鼠标滚动事件
  180. const handleScroll = (event: any) => throttle(computeRow, 100);
  181. // 计算当前显示tab
  182. const computeRow = () => {
  183.   // console.log('距离顶部距离', window.scrollY, geneTexts);

  185.   let scrollableDiv = document.getElementById('scrollable-div');
  186.   let topPosition = scrollableDiv.scrollTop;
  187.   let leftPosition = scrollableDiv.scrollLeft;
  188.   console.log('垂直滚动位置:', topPosition, '水平滚动位置:', leftPosition);

  190.   const startIndex = Math.max(0, Math.floor(topPosition / 30));
  191.   start.value = startIndex;
  192.   const endIndex = startIndex + 300;
  193.   data2.value = data.geneTexts.slice(startIndex, endIndex);

  195.   let inner = document.getElementById('inner');
  196.   if (topPosition < 2700) {
  197.     // 向上预计加载，这里判断了三个高度，可以多判断几个，增加流畅度
  198.     inner.style.paddingTop = topPosition + 'px';
  199.     inner.style.paddingBottom = (data.geneTexts.length + 2) * 30 - topPosition + 'px';
  200.   } else if (topPosition + data2.value.length * 30 >= data.geneTexts.length * 30) {
  201.     // 这里 9000 是 内层div的高度 30 * 300
  202.     inner.style.paddingTop = topPosition - 900 + 'px'; //900 是div的高度
  203.     inner.style.paddingBottom = 0 + 'px';
  204.   } else {
  205.     inner.style.paddingTop = topPosition - 2700 + 'px';
  206.     inner.style.paddingBottom = (data.geneTexts.length + 2) * 30 + 2700 - topPosition + 'px';
  207.   }
  208. };
  209. const data2 = ref([]);
  210. const init = () => {
  211.   data2.value = data.geneTexts.slice(0, 300);
  212.   let inner = document.getElementById('inner');
  213.   inner.style.paddingTop = 0 + 'px';
  214.   inner.style.paddingBottom = (data.geneTexts.length + 2) * 30 - 900 + 'px';
  215. };
  216. </script>

  218. <style lang="less" scoped>
  219. // @import '../../../../assets/styles/views/medaka.less';

  221. .button-box {
  222.   margin-bottom: 25px;
  223.   .flex-type(flex-end);

  225.   :deep(.ant-btn) {
  226.     margin-left: 10px;
  227.   }
  228. }
  229. .enn {
  230.   background: #282c34;
  231.   outline: 1px solid red;
  232.   padding: 30px 20px;
  233.   height: 960px;
  234. }
  235. .download-box {
  236.   width: 100%;
  237.   // padding: 30px 20px;
  238.   outline: 1px solid rgb(17, 0, 255);
  239.   background-color: #fff;
  240.   overflow: hidden;

  242.   .line-box {
  243.     .flex-type(flex-start);
  244.     height: 30px;
  245.   }

  247.   &.txt {
  248.     background: #282c34;
  249.     color: #fff;
  250.     height: 900px;
  251.     overflow: auto;

  253.     .el-row {
  254.       display: flex;
  255.       align-items: center;
  256.       margin-bottom: 10px;
  257.       margin: auto;
  258.       font-size: 22px;
  259.     }
  260.   }
  261. }

  263. .form-box {
  264.   .flex-type(center);
  265. }

  267. :deep(.ant-select-selector) {
  268.   min-width: 120px;
  269. }

  271. @media screen and (min-width: 1842px) {
  272.   .text-box-samll {
  273.     letter-spacing: 1.5px;
  274.     font-size: 15px;
  275.   }

  277.   .text-number-samll {
  278.     min-width: 60px;
  279.     font-size: 15px;
  280.   }

  282.   .text-number2-samll {
  283.     margin-left: 20px;
  284.     min-width: 60px;
  285.     font-size: 15px;
  286.   }

  288.   .text-title-samll {
  289.     font-size: 15px;
  290.   }

  292.   .text-box {
  293.     font-size: 22px;
  294.     // letter-spacing: 3px;
  295.   }

  297.   .text-number {
  298.     min-width: 100px;
  299.     font-size: 22px;
  300.   }

  302.   .text-number2 {
  303.     margin-left: 20px;
  304.     min-width: 100px;
  305.     font-size: 22px;
  306.   }

  308.   .text-title {
  309.     font-size: 22px;
  310.   }
  311. }

  313. @media screen and (min-width: 1600px) and (max-width: 1841px) {
  314.   .text-box-samll {
  315.     font-size: 15px;
  316.   }

  318.   .text-number-samll {
  319.     min-width: 40px;
  320.     font-size: 15px;
  321.   }

  323.   .text-number2-samll {
  324.     margin-left: 20px;
  325.     min-width: 40px;
  326.     font-size: 15px;
  327.   }

  329.   .text-title-samll {
  330.     font-size: 15px;
  331.   }

  333.   .text-box {
  334.     font-size: 20px;
  335.     // letter-spacing: 1.2px;
  336.   }

  338.   .text-number {
  339.     min-width: 60px;
  340.     font-size: 15px;
  341.   }

  343.   .text-number2 {
  344.     margin-left: 20px;
  345.     min-width: 60px;
  346.     font-size: 20px;
  347.   }

  349.   .text-title {
  350.     font-size: 20px;
  351.   }
  352. }

  354. @media screen and (min-width: 1443px) and (max-width: 1599px) {
  355.   .text-box-samll {
  356.     font-size: 13px;
  357.   }

  359.   .text-number-samll {
  360.     min-width: 40px;
  361.     font-size: 13px;
  362.   }

  364.   .text-number2-samll {
  365.     margin-left: 20px;
  366.     min-width: 40px;
  367.     font-size: 13px;
  368.   }

  370.   .text-title-samll {
  371.     font-size: 13px;
  372.   }

  374.   .text-box {
  375.     font-size: 18px;
  376.     // letter-spacing: 1.2px;
  377.   }

  379.   .text-number {
  380.     min-width: 60px;
  381.     font-size: 15px;
  382.   }

  384.   .text-number2 {
  385.     margin-left: 20px;
  386.     min-width: 60px;
  387.     font-size: 18px;
  388.   }

  390.   .text-title {
  391.     font-size: 18px;
  392.   }
  393. }

  395. @media screen and (max-width: 1442px) {
  396.   .text-box-samll {
  397.     font-size: 11px;
  398.   }

  400.   .text-number-samll {
  401.     min-width: 40px;
  402.     font-size: 11px;
  403.   }

  405.   .text-number2-samll {
  406.     margin-left: 20px;
  407.     min-width: 40px;
  408.     font-size: 11px;
  409.   }

  411.   .text-title-samll {
  412.     font-size: 11px;
  413.   }

  415.   .text-box {
  416.     font-size: 16px;
  417.     // letter-spacing: 1.2px;
  418.   }

  420.   .text-number {
  421.     min-width: 60px;
  422.     font-size: 15px;
  423.   }

  425.   .text-number2 {
  426.     margin-left: 20px;
  427.     min-width: 60px;
  428.     font-size: 16px;
  429.   }

  431.   .text-title {
  432.     font-size: 16px;
  433.   }
  434. }
  435. </style>
复制代码
总结

到此这篇关于前端虚拟滚动列表(vue虚拟列表)的文章就介绍到这了,更多相关前端虚拟滚动列表内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

来源:https://www.jb51.net/javascript/323307co2.htm
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！

本帖子中包含更多资源

您需要 登录 才可以下载或查看，没有账号？立即注册

x

上一篇: Vue点击在弹窗外部实现一键关闭的示例代码

下一篇: 前端实现浏览器自定义滚动条写法实例

发表于 2024-7-5 23:15:50

举报 回复 使用道具

返回列表 发新帖

Archiver|手机版|小黑屋|翼度科技

Copyright © 2001-2020, Tencent Cloud.　Powered by Discuz! X3.4