前端如何处理后端一次性传来的10w条数据

50 篇文章 0 订阅

因为之前在看到了这样的文章,博主介绍了很多种实现方式,作为一名菜鸟级选手,我选择了其中一种实践了一下,因为在平时的项目中其实只需要熟练掌握一种就可以了(( • ̀ω•́ )✧还有就是我是菜鸟~)

懒加载实现大数据量的列表展示

node 简单的写一下接口

const express = require('express');
const cors = require('cors')
const app = express();
app.use(cors())
app.get('/user', (req, res) => {
  let list = []
  let num = 0
  // 生成10万条数据的list
  for (let i = 0; i < 100000; i++) {
    num++
    list.push({
      src: 'https://p3-passport.byteacctimg.com/img/user-avatar/3b4dabc9f03e3a13a72d443412e03d6e~300x300.image',
      text: `我是${num}号嘉宾陌上烟雨寒`,
      icon: 'text',
      tid: num
    })
  }
  res.send(list)
})
app.listen(8081, () => {
  console.log('serve running at http://127.0.0.1:8081')
})

vue3 懒加载

<template>
  <div
    id="container"
    style="height: 500px; overflow: auto"
    @scroll="handleScroll"
    ref="container"
  >
    <div class="sunshine" v-for="item in showList" :key="item.tid">
      <img :src="item.src" style="height: 30px; width: 30px" />
      <span>{{ item.text }}</span>
    </div>
  </div>
</template>
<script >
import { ref, defineComponent, onMounted, computed } from "vue";
import axios from "axios";
axios.defaults.baseURL = "http://127.0.0.1:8081/";
export default defineComponent({
  name: "",
  setup() {
    const container = ref();
    // const blank = ref();
    const list = ref([]); // 列表
    const page = ref(1);
    const limit = 200; // 一次展示200条
    const maxPage = computed(() => Math.ceil(list.value.length / limit)); // 向下取整获取页数
    // 真实展示的列表
    const showList = computed(() => list.value.slice(0, page.value * limit));
    const handleScroll = () => {
      if (page.value > maxPage.value) return;
      const clientHeight = container.value.clientHeight; // 

      const scrollHeight = container.value.scrollHeight;

      const scrollTop = container.value.scrollTop;
      
	  // 触底监测
      if (scrollHeight <= scrollTop + clientHeight + 10) {
        page.value++;
      }
    };
    onMounted(() => {
      getDataList();
    });
    const getDataList = () => {
      axios.get("user").then((res) => {
        list.value = res.data;
      });
    };
    return {
      handleScroll,
      showList,
      container,
      list,
      page,
      limit,
      maxPage,
    };
  },
});
</script>


小tip

clientHeight ,offsetHeight,scrollHeight,scrollTop介绍
O(∩_∩)O~ 精准打击基础知识不清晰

  • clientHeight 元素可视区域高度:
    它返回该元素的像素高度,高度包含内边距(padding),不包含边框(border),外边距(margin)和滚动条,是一个整数,单位是像素 px。
    在这里插入图片描述
  • offsetHeight高度:
    它返回该元素的像素高度,高度包含内边距(padding)和边框(border),不包含外边距(margin),是一个整数,单位是像素 px。

在这里插入图片描述

  • scrollHeight 高度
    它返回该元素的像素高度,高度包含内边距(padding),不包含外边距(margin)、边框(border),是一个整数,单位是像素 px。
    在这里插入图片描述
  • element.scrollTop
    返回当前视图中的实际元素的顶部边缘和顶部边缘之间的距离

参考链接:https://juejin.cn/post/7031923575044964389

评论 12 您还未登录,请先 登录 后发表或查看评论

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

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:数字20 设计师:CSDN官方博客 返回首页

打赏作者

陌上烟雨寒

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

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

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

打赏作者

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

抵扣说明:

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

余额充值