前端虚拟滚动列表 vue虚拟列表

已于 2024-05-06 11:10:10 修改
阅读量1.9k 收藏 9
点赞数 8
分类专栏： JavaScript Vue 前端技巧方法 文章标签： 前端 vue.js javascript
于 2024-03-31 00:08:43 首次发布
夜空孤狼啸
本文链接：https://blog.csdn.net/qq_43940789/article/details/137187370
版权

文章目录

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

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

  • IntersectionObserver可以用来自动监听元素是否进入了设备的可视区域之内，而不需要频繁的计算来做这个判断。由于可见（visible）的本质是，目标元素与视口产生一个交叉区，所以这个 API 叫做"交叉观察器"
    IntersectionObserver 方案多用于图片懒加载或者列表虚拟滚动

IntersectionObserver 是浏览器原生提供的构造函数，接受两个参数： callback：可见性发现变化时的回调函数 option：配置对象（可选）。
构造函数的返回值是一个观察器实例。实例一共有4个方法：

  • observe：开始监听特定元素

  • unobserve：停止监听特定元素

  • disconnect：关闭监听工作

  • takeRecords：返回所有观察目标的对象数组

  • callback 参数
    目标元素的可见性变化时，就会调用观察器的回调函数callback。
    callback一般会触发两次。一次是目标元素刚刚进入视口，另一次是完全离开视口。

const io = new IntersectionObserver((changes, observer) => {
  console.log(changes);
  console.log(observer);
});
  • options
  1. threshold: 决定了什么时候触发回调函数。它是一个数组，每个成员都是一个门槛值，默认为[0]，即交叉比例（intersectionRatio）达到0时触发回调函数。用户可以自定义这个数组。比如，[0, 0.25, 0.5, 0.75, 1]就表示当目标元素 0%、25%、50%、75%、100% 可见时，会触发回调函数。
  2. root: 用于观察的根元素，默认是浏览器的视口，也可以指定具体元素，指定元素的时候用于观察的元素必须是指定元素的子元素
  3. rootMargin: 用来扩大或者缩小视窗的的大小，使用css的定义方法，10px 10px 30px 20px表示top、right、bottom 和 left的值
    ————————————————

这里是后面补充的简单还原了下面方法二的例子，重点在60行，从哪儿看就可以

<template>
  <div class="big-box">
    <div class="download-box txt" id="scrollable-div">
      <div v-for="(item, index) in props.seqText" :key="index" class="line-box">
        <template v-if="index === 0 && start === 0">
          <div :class="{ 'text-title': props.collapsed, 'text-title-samll': !props.collapsed }">
            {{ item }}
          </div>
        </template>
        <template v-else>
          <div :class="{ 'text-number': props.collapsed, 'text-number-samll': !props.collapsed }">
            {{ calLine(item, index + start) }}
          </div>
          <div
            :class="{ 'text-box': props.collapsed, 'text-box-samll': !props.collapsed }"
            :data="item"
          >
            ''
          </div>
          <div :class="{ 'text-number2': props.collapsed, 'text-number2-samll': !props.collapsed }">
            {{ endRow(item, index + start) }}
          </div>
        </template>
      </div>
    </div>
  </div>

  <SearchBox :againFind="againFind" />
</template>

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

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

const props = defineProps({
  collapsed: {
    type: Boolean,
    default: true,
  },
  seqText: {
    type: Array as PropType<string[]>,
    default: [''],
  },
});
let width = 100;
const geneTexts: Array<string> = [];
const data = reactive({
  geneTexts,
});

const calLine = (item: any, index: number) => {
  return width * (index - 1) + 1;
};
const endRow = (item: any, index: number) => {
  return width * index;
};

//  这里是核心要点
const io = new IntersectionObserver(
  (entries) => {
    console.log(entries);
    for (const entry of entries) {
      if (entry.isIntersecting) {
        const elTxt = entry.target;
        // console.log(elTxt.getAttribute('data'));
        elTxt.innerHTML = elTxt.getAttribute('data');
        io.unobserve(elTxt);
      }
    }
  },
  {
    root: document.getElementById('scrollable-div'),
    // rootMargin: 0,
    threshold: 0.5,
  },
);
setTimeout(() => {
  const elList = document.querySelectorAll('.text-box');
  console.log(elList);
  elList.forEach((element) => {
    io.observe(element);
  });
}, 1000);

const againFind = ref(1);

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

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

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

  &.txt {
    background: #282c34;
    color: #fff;
    height: 810px;
    overflow: auto;

    .el-row {
      display: flex;
      align-items: center;
      margin-bottom: 10px;
      margin: auto;
      font-size: 22px;
    }
  }
}

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

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

  .text-number2-samll {
    margin-left: 20px;
    min-width: 60px;
    font-size: 15px;
  }

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

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

  .text-number {
    min-width: 100px;
    font-size: 22px;
  }

  .text-number2 {
    margin-left: 20px;
    min-width: 100px;
    font-size: 22px;
  }

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

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

  .text-number2-samll {
    margin-left: 20px;
    min-width: 40px;
    font-size: 15px;
  }

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

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

  .text-number {
    min-width: 60px;
    font-size: 20px;
  }

  .text-number2 {
    margin-left: 20px;
    min-width: 60px;
    font-size: 20px;
  }

  .text-title {
    font-size: 20px;
  }
}

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

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

  .text-number2-samll {
    margin-left: 20px;
    min-width: 40px;
    font-size: 13px;
  }

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

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

  .text-number {
    min-width: 60px;
    font-size: 15px;
  }

  .text-number2 {
    margin-left: 20px;
    min-width: 60px;
    font-size: 18px;
  }

  .text-title {
    font-size: 18px;
  }
}

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

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

  .text-number2-samll {
    margin-left: 20px;
    min-width: 40px;
    font-size: 11px;
  }

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

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

  .text-number {
    min-width: 60px;
    font-size: 15px;
  }

  .text-number2 {
    margin-left: 20px;
    min-width: 60px;
    font-size: 16px;
  }

  .text-title {
    font-size: 16px;
  }
}
</style>

前端虚拟滚动列表（方法二：监听滚动计算 麻烦）

在大型的企业级项目中经常要渲染大量的数据，这种长列表是一个很普遍的场景，当列表内容越来越多就会导致页面滑动卡顿、白屏、数据渲染较慢的问题；大数据量列表性能优化，减少真实dom的渲染

看图：绿色是显示区域，绿色和蓝色中间属于预加载：解决滚动闪屏问题；大致了解了流程在往下看；
在这里插入图片描述

实现效果：

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

实现思路：

虚拟列表滚动大致思路：两个div容器

  外层：外部容器用来固定列表容器的高度，同时生成滚动条

  内层：内部容器用来装元素，高度是所有元素高度的和

  外层容器鼠标滚动事件  dom.scrollTop 获取滚动条的位置

  根据每行列表的高以及当前滚动条的位置，利用slice() 去截取当前需要显示的内容

  重点：滚动条的高度是有内层容器的paddingBottom 和 paddingTop 属性顶起来了，确保滚动条位置的准确性

  这里鼠标上下滚动会出现闪屏问题：解决方案如下：

      方案一：  预加载：

                    向下预加载：
                        比如div滚动区域显示30行，就预加载 300行( 即这里 slice(startIndex,startIndex + 300) )，

                    向上预加载：
                        在滚动监听事件函数中（computeRow）判断inner的paddingTop和paddingBottom即可

                    当然这里的download-box的padding有30px像素，在加一个div，overflow：hidded就解决了

      方案二：缩小滚动范围或者节流时间缩短，这里写的500ms

具体代码

  <template>
    <div class="enn">
      <div class="download-box txt" id="scrollable-div" @scroll="handleScroll">
        <div id="inner">
          <div v-for="(item, index) in data2" :key="index" class="line-box">
            <div :class="{ 'text-box': props.collapsed, 'text-box-samll': !props.collapsed }">
              {{ item }}
            </div>
          </div>
        </div>
      </div>
    </div>
  </template>

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

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

  const props = defineProps({
    baseData: {
      type: Object as PropType<{
        taskId: string;
        barcodeName: string;
      }>,
      default: {},
    },
    collapsed: {
      type: Boolean,
      default: true,
    },
    type: {
      type: Boolean,
      default: false,
    },
  });

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

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

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

  let timer_throttle: any;
  const throttle = (func: Function, wait?: number) => {
    wait = wait || 500;
    if (!timer_throttle) {
      timer_throttle = setTimeout(() => {
        func.apply(this);
        timer_throttle = null;
      }, wait);
    }
  };

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

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

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

    let inner = document.getElementById('inner');
    if (topPosition < 2700) {
      // 向上预计加载，这里判断了三个高度，可以多判断几个，增加流畅度
      inner.style.paddingTop = topPosition + 'px';
      inner.style.paddingBottom = (data.geneTexts.length + 2) * 30 - topPosition + 'px';
    } else if (topPosition + data2.value.length * 30 >= data.geneTexts.length * 30) {
      // 这里 9000 是 内层div的高度 30 * 300   理解div高度是 padding+div内容高度
      inner.style.paddingTop = topPosition - 900 + 'px'; //900 是div的高度
      inner.style.paddingBottom = 0 + 'px';
    } else {
      inner.style.paddingTop = topPosition - 2700 + 'px';
      inner.style.paddingBottom = (data.geneTexts.length + 2) * 30 + 2700 - topPosition + 'px';
    }
  };
  const data2 = ref([]);
  const init = () => {
    data2.value = data.geneTexts.slice(0, 300);
    let inner = document.getElementById('inner');
    inner.style.paddingTop = 0 + 'px';
    inner.style.paddingBottom = (data.geneTexts.length + 2) * 30 - 900 + 'px';
  };
  </script>

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

    :deep(.ant-btn) {
      margin-left: 10px;
    }
  }
  .enn {
    background: #282c34;
    outline: 1px solid red;
    padding: 30px 20px;
    height: 960px;
  }
  .download-box {
    width: 100%;
    // padding: 30px 20px;
    outline: 1px solid rgb(17, 0, 255);
    background-color: #fff;
    overflow: hidden;

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

    &.txt {
      background: #282c34;
      color: #fff;
      height: 900px;
      overflow: auto;
    }
  }
  </style>

替代方案

上面是自己写的，github上面还有好多插件可以用，但各有优劣，根据自己需求选择
如：

vue-virtual-scroller

https://github.com/Akryum/vue-virtual-scroller/tree/0f2e36248421ad69f41c9a08b8dcf7839527b8c2

vue-virt-list

vue-draggable-virtual-scroll-list

virtual-list

自己找吧，我就不一一列举了，看图

在这里插入图片描述

<template>
  <br />
  <div>
    <Table
      :columns="tableConfig.columns"
      :data="tableConfig.totalData"
      :loading="tableConfig.loading"
      :pagination="false"
    ></Table>
  </div>
  <br />

  <div class="button-box">
    <a-select
      v-model:value="selection"
      placeholder="请选择序列"
      :options="seqOptions"
      @change="
        (selection:string) => handleChangeSeq(baseData.taskId, baseData.barcodeName, width, selection)
      "
    ></a-select>
    <a-button type="primary" @click="handleClickExport()">导出所有序列</a-button>
    <a-button type="primary" @click="modalConfig.visible = true">导出当前序列</a-button>
  </div>
  <!-- <SeqText :collapsed="props.collapsed" :seqText="data.geneTexts" /> -->
  <div class="enn">
    <div class="download-box txt" id="scrollable-div" @scroll="handleScroll">
      <div id="inner">
        <div v-for="(item, index) in data2" :key="index" class="line-box">
          <template v-if="index === 0 && start === 0">
            <div :class="{ 'text-title': props.collapsed, 'text-title-samll': !props.collapsed }">
              {{ item }}
            </div>
          </template>
          <template v-else>
            <div :class="{ 'text-number': props.collapsed, 'text-number-samll': !props.collapsed }">
              {{ calLine(item, index + start) }}
            </div>
            <div :class="{ 'text-box': props.collapsed, 'text-box-samll': !props.collapsed }">
              {{ item }}
            </div>
            <div
              :class="{ 'text-number2': props.collapsed, 'text-number2-samll': !props.collapsed }"
            >
              {{ endRow(item, index + start) }}
            </div>
          </template>
        </div>
      </div>
    </div>
  </div>
  <br />

  <a-modal
    title="导出文件"
    :visible="modalConfig.visible"
    @ok="handleExport(data.geneTexts)"
    @cancel="modalConfig.visible = false"
  >
    <div class="form-box">
      <a-form>
        <a-form-item label="自定义文件名">
          <a-input v-model:value="modalConfig.name" placeholder="请输入自定义文件名"></a-input>
        </a-form-item>
      </a-form>
    </div>
  </a-modal>
</template>

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

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

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

const props = defineProps({
  /**
   * 基础数据
   */
  baseData: {
    type: Object as PropType<{
      taskId: string;
      barcodeName: string;
    }>,
    default: {},
  },
  collapsed: {
    type: Boolean,
    default: true,
  },
  type: {
    type: Boolean,
    default: false,
  },
});

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

const VITE_APP_URL = serverAddress();
const { modalConfig, handleExport } = useModal();
const handleClickExport = () => {
  let path = '';
  if (props.type) {
    path = VITE_APP_URL + `outputs/${taskId}/fastq_analysis/${barcodeName}/ragtag.fasta`;
  } else {
    path =
      VITE_APP_URL + `outputs/${taskId}/fastq_analysis/${barcodeName}/${barcodeName}.final.fasta`;
  }

  download(path, '.fasta');
};
const calLine = (item: any, index: number) => {
  return width * (index - 1) + 1;
};
const endRow = (item: any, index: number) => {
  return width * index;
};
onMounted(() => {
  getAvailableSeq(taskId, barcodeName).then(() => {
    if (seqOptions.value.length > 0) {
      getMedaka(taskId, barcodeName, width, seqOptions.value[0].value).then(() => init());
      // getMedaka(taskId, barcodeName, width);
    }
  });
  getTable(taskId, barcodeName);
});

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

let timer_throttle: any;
const throttle = (func: Function, wait?: number) => {
  wait = wait || 500;
  if (!timer_throttle) {
    timer_throttle = setTimeout(() => {
      func.apply(this);
      timer_throttle = null;
    }, wait);
  }
};
let start = ref(0);
// 鼠标滚动事件
const handleScroll = (event: any) => throttle(computeRow, 100);
// 计算当前显示tab
const computeRow = () => {
  // console.log('距离顶部距离', window.scrollY, geneTexts);

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

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

  let inner = document.getElementById('inner');
  if (topPosition < 2700) {
    // 向上预计加载，这里判断了三个高度，可以多判断几个，增加流畅度
    inner.style.paddingTop = topPosition + 'px';
    inner.style.paddingBottom = (data.geneTexts.length + 2) * 30 - topPosition + 'px';
  } else if (topPosition + data2.value.length * 30 >= data.geneTexts.length * 30) {
    // 这里 9000 是 内层div的高度 30 * 300
    inner.style.paddingTop = topPosition - 900 + 'px'; //900 是div的高度
    inner.style.paddingBottom = 0 + 'px';
  } else {
    inner.style.paddingTop = topPosition - 2700 + 'px';
    inner.style.paddingBottom = (data.geneTexts.length + 2) * 30 + 2700 - topPosition + 'px';
  }
};
const data2 = ref([]);
const init = () => {
  data2.value = data.geneTexts.slice(0, 300);
  let inner = document.getElementById('inner');
  inner.style.paddingTop = 0 + 'px';
  inner.style.paddingBottom = (data.geneTexts.length + 2) * 30 - 900 + 'px';
};
</script>

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

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

  :deep(.ant-btn) {
    margin-left: 10px;
  }
}
.enn {
  background: #282c34;
  outline: 1px solid red;
  padding: 30px 20px;
  height: 960px;
}
.download-box {
  width: 100%;
  // padding: 30px 20px;
  outline: 1px solid rgb(17, 0, 255);
  background-color: #fff;
  overflow: hidden;

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

  &.txt {
    background: #282c34;
    color: #fff;
    height: 900px;
    overflow: auto;

    .el-row {
      display: flex;
      align-items: center;
      margin-bottom: 10px;
      margin: auto;
      font-size: 22px;
    }
  }
}

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

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

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

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

  .text-number2-samll {
    margin-left: 20px;
    min-width: 60px;
    font-size: 15px;
  }

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

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

  .text-number {
    min-width: 100px;
    font-size: 22px;
  }

  .text-number2 {
    margin-left: 20px;
    min-width: 100px;
    font-size: 22px;
  }

  .text-title {
    font-size: 22px;
  }
}

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

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

  .text-number2-samll {
    margin-left: 20px;
    min-width: 40px;
    font-size: 15px;
  }

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

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

  .text-number {
    min-width: 60px;
    font-size: 15px;
  }

  .text-number2 {
    margin-left: 20px;
    min-width: 60px;
    font-size: 20px;
  }

  .text-title {
    font-size: 20px;
  }
}

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

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

  .text-number2-samll {
    margin-left: 20px;
    min-width: 40px;
    font-size: 13px;
  }

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

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

  .text-number {
    min-width: 60px;
    font-size: 15px;
  }

  .text-number2 {
    margin-left: 20px;
    min-width: 60px;
    font-size: 18px;
  }

  .text-title {
    font-size: 18px;
  }
}

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

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

  .text-number2-samll {
    margin-left: 20px;
    min-width: 40px;
    font-size: 11px;
  }

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

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

  .text-number {
    min-width: 60px;
    font-size: 15px;
  }

  .text-number2 {
    margin-left: 20px;
    min-width: 60px;
    font-size: 16px;
  }

  .text-title {
    font-size: 16px;
  }
}
</style>
夜空孤狼啸
关注
  • 8
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
vue3 实现虚拟列表
qq_64085502的博客
04-21 357
在vue3中实现定高与不定高虚拟列表
vue性能优化之虚拟列表滚动
老电影故事的博客
04-28 2856
前端的性能瓶颈那就是页面的卡顿，当然这种页面的卡顿包含了多种原因。例如HTTP请求过多导致数据加载变慢，下载的静态文件非常大导致页面加载时间很长，js中一些算法响应的时间过长等。很多前端工程师都花费很多的精力在dom渲染上来优化页面加载。
vue实现循环滚动列表
10-15
主要为大家详细介绍了vue实现循环滚动列表，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
element-ui-解决下拉框数据量过多问题（vue-virtual-scroll-list）
xiuxialala的博客
10-31 2067
【代码】element-ui-解决下拉框数据量过多问题（vue-virtual-scroll-list）
vue实现虚拟列表滚动
qq_40912618的博客
11-16 973
1、首先，通过npm安装vue-virtual-scroll-list；2、在vue组件中引入vue-virtual-scroll-list
vue-virtual-scroll-list 虚拟列表
张小胖
12-14 4353
vue-virtual-scroll-list官方地址：官方地址https://www.npmjs.com/package/vue-virtual-scroll-list 安装: // npm 安装方式 npm install vue-virtual-scroll-list --save // yarn 安装方式 yarn add vue-virtual-scroll-list -S 引入方式 一、全局使（在 main.js 文件注册） import VirtualList ...
vue-virtual-scroll-list 的使用
honeymoon_的博客
11-30 7173
（一）使用背景 列表内容特别特别多，列表特别特币长，dom渲染必定使页面卡死。 使用vue-virtual-scroll-list，即列表的虚拟滚动。在可视区域渲染少部分列表内容，减少了创建dom节点和重新渲染组件的时间。 （二）实现步骤 1. 安装 npm install vue-virtual-scroll-list --save 2. 引入 + 注册组件 import virtualList from 'vue-virtual-scroll-list'; //引入 components: {
【Web技术】1346- 前端虚拟列表的实现原理
pingan8787
06-09 1572
作者：字节跳动 fe @程翯近期在某平台开发迭代的过程中遇到了超长List嵌套在antd Modal里加载慢，卡顿的情况。于是心血来潮决定从零自己实现一个虚拟滚动列表来优化一下整体的体验。改造前：img我们可以看出来在改造之前，打开编辑窗口Modal的时候会出现短暂的卡顿，并且在点击Cancel关闭后也并不是立即响应而是稍作迟疑之后才关闭的改造后：img改造完成后我们可以...
前端高性能渲染 — 虚拟列表
qq_60754128的博客
09-02 768
实现简单的虚拟列表
Vue 展示巨量数据，vue-virtual-scroller 使用说明 vue3 vue2
热门推荐
07-31 3万+
Vue 展示巨量数据，vue-virtual-scroller 使用说明 vue3 vue2 一、遇到的问题 最近在做的一个小工具中需要解决一个展示巨量数据列表的问题，数据有 8万 多条。 刚开始我是直接让它渲染的，结果用了60秒之多，我以为是数据处理耗时多，经过排查，发现是 dom 渲染用时长，数据处理其实只用了不到 100ms，如下图： 二、解决方案 vue-virtual-scroller 所以目前主要需要解决的就是如何能流畅展示这么多数据的问题，搜了下，搜到 vue-virtual-scrolle
前端列表滚动
08-21
前端列表滚动。。
基于vueuse的api实现的虚拟滚动和无限滚动列表
11-10
博主在使用 Vue 3 和 Vite 4 构建的项目中，基于 vueuse 提供的丰富 API，成功实现了虚拟滚动和无限滚动列表的功能，这一成果充分展现了博主在前端开发领域的深厚技术功底和创新能力。 首先，博主通过充分利用 vue...
基于vue的虚拟列表优化交互
01-17
"基于Vue的虚拟列表优化交互"是解决这个问题的关键技术，它针对长列表（如微博、淘宝、知乎等）进行性能优化，确保用户在滚动时能够享受到流畅的体验。本文将深入探讨虚拟列表的工作原理、优势以及如何在Vue.js中...
vue-virtual-scroll:虚拟列表，可以实现无限加载
04-11
虚拟列表实现无限加载在进行前端业务开发时，很容易遇到需要加载巨大列表的场景，比如微博的信息流、微信的朋友圈和直播平台的聊天框，这些列表通常具有两个显着的特点不能分页只要用户愿意就可以无限的滚动下去在...
基于Vue.js的强大的虚拟滚动条.zip
09-24
基于Vue.js的强大的虚拟滚动条.zip,A scrolling plugin with a easy getting-start and full configuration for Vue.js.
前端工程师必备+vue面试题
07-08
在Vue.js中如何使用虚拟滚动（如vue-virtual-scroller）？ 描述一下Vue.js的性能优化技巧，可以提供哪些优化方法？ 在Vue.js中如何使用动画和过渡效果？ 解释一下Vue.js中的双向绑定是如何实现的？ 在Vue.js中如何...
推荐开源项目：Vue-Virtual-Scroll-List - 高效滚动列表解决方案
最新发布
gitblog_00052的博客
03-21 477
推荐开源项目：Vue-Virtual-Scroll-List - 高效滚动列表解决方案 项目地址:https://gitcode.com/tangbc/vue-virtual-scroll-list 项目简介 Vue-Virtual-Scroll-List 是一个基于 Vue.js 的高效虚拟滚动列表组件，由 TangBC 开发并维护。它旨在解决在大数据量列表渲染时，由于浏览器需要一次性绘制大量元...
vue2虚拟滚动下拉选择器
獨孤殤的博客
09-19 759
解决 element-ui 中 el-select 组件在大数据量的情况下出现的性能问题(数据量太大，导致渲染过慢，或造成页面卡顿甚至于卡死) 。
h5虚拟列表，有哪些成熟的插件
06-13
虚拟列表是一种常见的优化技术，特别是在处理大量数据时，可以提高前端页面的性能和用户体验。以下是一些常用的 H5 虚拟列表插件： 1. react-virtualized：基于 React 的虚拟列表插件，支持横向和纵向滚动，具有高度的自定义性。 2. vue-virtual-scroll-list：基于 Vue 的虚拟列表插件，支持大数据量的展示和滚动，支持水平和垂直方向的滚动。 3. angular-virtual-scroll：基于 Angular 的虚拟滚动插件，支持大数据量的展示和滚动，可以自定义列表项的高度和宽度。 4. ngx-virtual-scroller：基于 Angular 的虚拟滚动插件，支持大数据量的展示和滚动，具有高性能和可扩展性。 5. react-window：基于 React 的虚拟滚动插件，支持渲染大量数据，具有高性能和灵活性。 以上是一些常用的 H5 虚拟列表插件，可以根据具体项目需求进行选择。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

夜空孤狼啸

你的鼓励是我创作的最大动力！

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值