資訊專欄INFORMATION COLUMN
摘要：就是下圖中，條數(shù)據(jù)的高度，但是因?yàn)橛袧L動(dòng)條，所以屏幕看不到這么高當(dāng)元素出現(xiàn)滾動(dòng)條時(shí)，向下拖動(dòng)滾動(dòng)條，內(nèi)容向上滾動(dòng)的距離。如果該元素沒(méi)有滾動(dòng)條，則的值為，該值只能是正值。
在項(xiàng)目中遇到了一個(gè)性能問(wèn)題
vue+elementUI table表格展示數(shù)據(jù)，當(dāng)數(shù)據(jù)很多的時(shí)候，不能一頁(yè)顯示完，同時(shí)一次請(qǐng)求數(shù)據(jù)量太大，會(huì)增加網(wǎng)頁(yè)渲染的時(shí)間，影響體驗(yàn)，
這個(gè)時(shí)候常常有兩種方法處理，
1、分頁(yè)，如下
2、如果我不想分頁(yè)，又想在一頁(yè)顯示全部數(shù)據(jù)呢？這個(gè)時(shí)候其實(shí)就可以用數(shù)據(jù)懶加載了
如下一開始表格只顯示31行數(shù)據(jù)
當(dāng)將滾動(dòng)條拉到低的時(shí)候，就會(huì)再加載31條數(shù)據(jù)，如果剩下的數(shù)據(jù)不足31，那就加載剩下的
根據(jù)項(xiàng)目需求，這需要一頁(yè)可以看到全部數(shù)據(jù)，所以我選擇了第二中方式
那么第二種方式要怎么去實(shí)現(xiàn)呢？
在了解它的原理前，你需要分清楚三個(gè)屬性：
scrollHeight：指元素的總高度，包含滾動(dòng)條中的內(nèi)容。只讀屬性。不帶px單位。就是下圖中，54條數(shù)據(jù)的高度，但是因?yàn)橛袧L動(dòng)條，所以屏幕看不到這么高
scrollTop：當(dāng)元素出現(xiàn)滾動(dòng)條時(shí)，向下拖動(dòng)滾動(dòng)條，內(nèi)容向上滾動(dòng)的距離。可讀可寫屬性。不帶px單位。如果該元素沒(méi)有滾動(dòng)條，則scrollTop的值為0，該值只能是正值。就是下圖中紅色框的高度
clientHeight：元素客戶區(qū)的大小，指的是元素內(nèi)容及其邊框所占據(jù)的空間大小，實(shí)際上就是可視區(qū)域的大小。就是下圖紅色箭頭的高度
那如何判斷滾動(dòng)條滾到底部了呢？
scrollHeight-scrollTop-clientHeight=0，這個(gè)時(shí)候可以就是滾動(dòng)條滾到底部的時(shí)候了。
在第一次請(qǐng)求數(shù)據(jù)的時(shí)候，先設(shè)置一個(gè)變量來(lái)記錄請(qǐng)求次數(shù)（其實(shí)后臺(tái)也是做分頁(yè)的處理）
this.currentPage = 1,
$this = this;
this.$axios.fun().then(res=>{
$this.totalPage = res.totalPage; //這里需要知道總頁(yè)數(shù)
$this.tableData = res.data;//表格數(shù)據(jù)
})
監(jiān)聽(tīng)表格dom對(duì)象的滾動(dòng)事件
let dom = document.querySelector(targetDom);
dom.addEventListener("scroll", function() {
const scrollDistance =dom.scrollHeight - dom.scrollTop - dom.clientHeight;
if(scrollDistance <=0){//等于0證明已經(jīng)到底，可以請(qǐng)求接口
if($this.currentPage < $this.totalPage){//當(dāng)前頁(yè)數(shù)小于總頁(yè)數(shù)就請(qǐng)求
$this.currentPage++;//當(dāng)前頁(yè)數(shù)自增
//請(qǐng)求接口的代碼
$this.$axios.fun().then(res=>{
$this.tableData = $this.tableData.concat(res.data)//將請(qǐng)求回來(lái)的數(shù)據(jù)和當(dāng)前展示的數(shù)據(jù)合并在一起
})
}
}
})
好了，表格滾動(dòng)下拉懶加載數(shù)據(jù)就是這樣實(shí)現(xiàn)的，希望可以幫到有需求的同學(xué)。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/103171.html
摘要：如果我們能把不同路由對(duì)應(yīng)的組件分割成不同的代碼塊，然后當(dāng)路由被訪問(wèn)的時(shí)候才加載對(duì)應(yīng)組件，這樣就更加高效了。 前言 之前用vuecli做了個(gè)博客，是一個(gè)單頁(yè)面項(xiàng)目，大概有十個(gè)路由直接npm run build打包出來(lái)，有一個(gè)1M的巨大js文件 showImg(https://segmentfault.com/img/bVbtXVk?w=1516&h=218); 先掛載到服務(wù)器上試試好家伙...
摘要：基于這種思路，那留給我們的只有兩步，組件設(shè)計(jì)和數(shù)據(jù)設(shè)計(jì)。關(guān)于組件的相關(guān)邏輯，可能要在文章里面一次性說(shuō)清楚，還是需要費(fèi)很大的精力，不過(guò)希望數(shù)據(jù)驅(qū)動(dòng)的思想能夠讓之前沒(méi)有體會(huì)到這種開發(fā)樂(lè)趣的小伙伴們有到新的想法。 在日常開發(fā)中，我們肯定不止一次碰到重復(fù)的業(yè)務(wù)代碼，明明功能相似，但總沒(méi)思路去把它封裝成組件。關(guān)于封裝組件，希望這篇文章能帶給大家新的思路，去更高效的完成日常開發(fā)。（注：例子都是基于...
摘要：獲取字符串中出現(xiàn)次數(shù)最多的字符。去掉字符串中的所有空格中對(duì)象數(shù)組按對(duì)象屬性排序 VUE 1、vue——解決You may use special comments to disable some warnings. Use // eslint-disable-next-line to ignore the next line. Use / eslint-disable / to ign...
摘要：獲取字符串中出現(xiàn)次數(shù)最多的字符。去掉字符串中的所有空格中對(duì)象數(shù)組按對(duì)象屬性排序 VUE 1、vue——解決You may use special comments to disable some warnings. Use // eslint-disable-next-line to ignore the next line. Use / eslint-disable / to ign...
閱讀 2695·2021-11-15 11:38
閱讀 2674·2021-11-04 16:13
閱讀 18408·2021-09-22 15:07
閱讀 1099·2019-08-30 15:55
閱讀 3325·2019-08-30 14:15
閱讀 1740·2019-08-29 13:59
閱讀 3287·2019-08-28 18:28
閱讀 1671·2019-08-23 18:29
