因為之前在看到了這樣的文章，博主介紹了很多種實現(xiàn)方式，作為一名菜鳥級選手，我選擇了其中一種實踐了一下，因為在平時的項目中其實只需要熟練掌握一種就可以了（( ? ?ω?? )?還有就是我是菜鳥~）

懶加載實現(xiàn)大數(shù)據(jù)量的列表展示

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萬條數(shù)據(jù)的listfor (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><divid="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)); // 向下取整獲取頁數(shù)// 真實展示的列表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;// 觸底監(jiān)測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~ 精準(zhǔn)打擊基礎(chǔ)知識不清晰

• clientHeight 元素可視區(qū)域高度：
  它返回該元素的像素高度，高度包含內(nèi)邊距（padding），不包含邊框（border），外邊距（margin）和滾動條，是一個整數(shù)，單位是像素 px。
  
• offsetHeight高度：
  它返回該元素的像素高度，高度包含內(nèi)邊距（padding）和邊框（border），不包含外邊距（margin），是一個整數(shù)，單位是像素 px。

• scrollHeight 高度
  它返回該元素的像素高度，高度包含內(nèi)邊距（padding），不包含外邊距（margin）、邊框（border），是一個整數(shù)，單位是像素 px。
  
• element.scrollTop
  返回當(dāng)前視圖中的實際元素的頂部邊緣和頂部邊緣之間的距離

參考鏈接：https://juejin.cn/post/7031923575044964389

總結(jié)

以上是生活随笔為你收集整理的前端如何处理后端一次性传来的10w条数据的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。