.wrapper {
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 60px;
overflow-y: scroll;
.background {
position: absolute;
top: 0;
left: 0;
right: 0;
z-index: -1;
}
.list {
position: absolute;
top: 0;
left: 0;
right: 0;
}
}
假如上面代碼total_height等于10000px,頁(yè)面運(yùn)行效果圖如下所示.
由于子元素.background設(shè)置了高度,父元素.wrapper就會(huì)被子元素支撐起來(lái),同時(shí)會(huì)出現(xiàn)滾動(dòng)條.
如果此時(shí)向下滑動(dòng),兩個(gè)子元素.background和.list會(huì)同時(shí)向上滾動(dòng).當(dāng)滾動(dòng)距離達(dá)到了9324px,滾動(dòng)條也抵達(dá)了底部.
這是因?yàn)楦冈?wrapper本身高度為676px,加上滑動(dòng)距離9324px，結(jié)果就剛好等于列表總高度10000px.
通過(guò)觀察以上行為可知,.background雖然只是一個(gè)空的div，但是通過(guò)給它賦予列表的總高度,可以讓右側(cè)的滾動(dòng)條和普通長(zhǎng)列表渲染產(chǎn)生的滾動(dòng)條保持外觀和行為上一致.
滾動(dòng)條的問(wèn)題解決了,但隨著滾動(dòng)條往下滑,數(shù)據(jù)列表隨之上移,列表全部移出了屏幕之后,接下來(lái)的滑動(dòng)全是白屏.
為了解決白屏問(wèn)題,視口必須始終展現(xiàn)出滑動(dòng)的數(shù)據(jù).那么.list元素要根據(jù)滑動(dòng)的距離動(dòng)態(tài)更新自身絕對(duì)定位的top值,這樣就能確保.list不被劃出屏幕之外.同時(shí)還要依據(jù)滑動(dòng)的距離動(dòng)態(tài)渲染當(dāng)前視口應(yīng)該展示的數(shù)據(jù).
觀察下面動(dòng)效圖,右側(cè)Dom結(jié)構(gòu)展示了滑動(dòng)時(shí)的變化.
滾動(dòng)條往下快速滑動(dòng)后,列表的Dom元素快速渲染刷新.此時(shí)除了.list內(nèi)部的Dom元素不斷的更換,.list元素自身也在不斷修改transform: translate3d(0, ? px ,0)樣式值(修改translate3d能達(dá)到和修改top屬性值相似的效果).
經(jīng)過(guò)上面的講解,虛擬滾動(dòng)的實(shí)現(xiàn)邏輯已經(jīng)清晰.首先js監(jiān)聽(tīng)滾動(dòng)條的滑動(dòng)事件,再通過(guò)滑動(dòng)距離計(jì)算出.list元素要渲染哪些子元素,其次更新.list元素位置.滾動(dòng)條不斷滑動(dòng)時(shí),子元素和位置也不斷更新,視口上便模擬出了滾動(dòng)效果.
實(shí)現(xiàn)
開(kāi)發(fā)的Demo頁(yè)面如下圖所示.列表項(xiàng)包含了以下三種結(jié)構(gòu):
小型列表項(xiàng),城市首字母單獨(dú)成一行,高度為50px;
普通列表項(xiàng),左側(cè)英文名,右側(cè)中文名,高度為100px;
大型列表項(xiàng),左側(cè)英文名,中間中文名,右側(cè)一張圖片,高度為150px;
列表數(shù)據(jù)city_data的json結(jié)構(gòu)類似如下,type為1代表采用小型列表項(xiàng)的樣式結(jié)構(gòu)渲染,2代表普通列表項(xiàng),3代表大型列表項(xiàng).
[{"name":"A","value":"","type":1},{"name":"Al l'Ayn","value":"艾因","type":2},{"name":"Aana","value":"阿納","type":3} ... ]
city_data包含了長(zhǎng)列表的所有數(shù)據(jù),city_data獲取后先遍歷調(diào)整每一項(xiàng)的數(shù)據(jù)結(jié)構(gòu)(代碼如下).
通過(guò)以下方法處理,每一個(gè)列表項(xiàng)最終都包含一個(gè)top和height值.top表示該項(xiàng)距離長(zhǎng)列表頂部的長(zhǎng)度,而height值指該項(xiàng)的高度.
total_height即整個(gè)列表的總高度,最終要賦予上文提及的.background元素.處理完后的數(shù)據(jù)賦予this.list存儲(chǔ),并記錄下最小列表項(xiàng)的高度this.min_height.
mounted () {
function getHeight (type) { // 根據(jù) type 值返回高度
switch (type) {
case 1: return 50;
case 2: return 100;
case 3: return 150;
default:
return "";
}
}
let total_height = 0;
const list = city_data.map((data, index) => {
const height = getHeight(data.type);
const ob = {
index,
height,
top: total_height,
data
}
total_height += height;
return ob;
})
this.total_height = total_height; // 列表總高度
this.list = list;
this.min_height = 50; // 最小高度是50
//屏幕最大能容納的列表項(xiàng)數(shù)量,containerHeight是父容器高度,按照最小高度來(lái)計(jì)算
this.maxNum = Math.ceil(containerHeight / this.min_height);
}html根據(jù)type值渲染不同的樣式結(jié)構(gòu)(代碼如下).父容器.wrapper綁定一個(gè)滑動(dòng)事件onScroll,列表元素.list內(nèi)部不是遍歷this.list數(shù)組,因?yàn)閠his.list是原始數(shù)據(jù),包含了所有的列表項(xiàng).
模板里面只需要遍歷視口需要展現(xiàn)的數(shù)據(jù)runList,數(shù)組runList包含的數(shù)據(jù)會(huì)隨著滾動(dòng)事件不斷更新.
{{item.data.name}}
{{item.data.value}}
滾動(dòng)事件觸發(fā)onScroll方法(代碼如下),由于滾動(dòng)條的觸發(fā)頻率非常高,為了減少瀏覽器的計(jì)算量,使用requestAnimationFrame函數(shù)做一下節(jié)流.
滾動(dòng)事件對(duì)象e可以獲取當(dāng)前滾動(dòng)條滑動(dòng)的距離distance.依據(jù)distance,只要計(jì)算出runList的列表數(shù)據(jù)以及修改.list的位置信息就大功告成了.
onScroll (e) {
if (this.ticking) {
return;
}
this.ticking = true;
requestAnimationFrame(() => {
this.ticking = false;
})
const distance = e.target.scrollTop;
this.distance = distance;
this.getRunData(distance);
}如何根據(jù)滾動(dòng)距離快速找到屏幕視口下應(yīng)該渲染的首個(gè)列表項(xiàng)元素呢?
this.list是長(zhǎng)列表的數(shù)據(jù)源,其中每一個(gè)列表項(xiàng)都存儲(chǔ)自己距離長(zhǎng)列表頂部的距離top以及自身的高度height.
上文提到一個(gè)結(jié)論,頁(yè)面滾動(dòng)過(guò)程中,如果視口的上邊沿和某個(gè)列表項(xiàng)的上邊沿剛好重合時(shí),滑動(dòng)距離scrollTop剛好等于該列表項(xiàng)距離長(zhǎng)列表頂部的距離top.
那么此時(shí)如果頁(yè)面再往上挪動(dòng)一點(diǎn),視口下第一個(gè)列表項(xiàng)只顯示了部分,另一部分劃出了屏幕外看不見(jiàn).這時(shí)我們?nèi)匀慌卸ㄒ暱谙碌钠鹗荚厝匀皇窃摿斜眄?xiàng),除非它繼續(xù)往上移動(dòng)直至徹底移出屏幕.
那么我們判端視口下渲染的第一個(gè)元素的標(biāo)準(zhǔn)便是頁(yè)面的滾動(dòng)距離scrollTop位于該列表項(xiàng)元素的top和top + height之間.
依據(jù)上面原理,可以采用二分法實(shí)現(xiàn)快速查詢(代碼如下).
//二分法計(jì)算起始索引,scrollTop為滾動(dòng)距離
getStartIndex (scrollTop) {
let start = 0, end = this.list.length - 1;
while (start < end) {
const mid = Math.floor((start + end) / 2);
const { top, height } = this.list[mid];
if (scrollTop >= top && scrollTop < top + height) {
start = mid;
break;
} else if (scrollTop >= top + height) {
start = mid + 1;
} else if (scrollTop < top) {
end = mid - 1;
}
}
return start;
}二分法計(jì)算出了視口下渲染的第一個(gè)元素位于this.list數(shù)組中的索引,命名為起始索引start_index.接下來(lái)進(jìn)入核心函數(shù)getRunData(代碼如下).它主要做了以下兩件事.
實(shí)際開(kāi)發(fā)中,假設(shè)屏幕高度為1000px,最小的列表項(xiàng)為50px,那么屏幕所能容納的最大列表項(xiàng)數(shù)量this.maxNum為20個(gè).
根據(jù)滑動(dòng)距離計(jì)算出起始索引start_index,再?gòu)臄?shù)據(jù)源this.list依據(jù)start_index截取20個(gè)元素賦予this.runList不就完成數(shù)據(jù)更新了嗎?
this.runList如果只盛放剛好一個(gè)屏幕容納的最大數(shù)量,當(dāng)滾動(dòng)條快速滾動(dòng)后,界面的渲染速度會(huì)跟不上手指滑動(dòng)速度,底部會(huì)有白屏閃爍.
解決此問(wèn)題的方法可以在HTML文檔上多渲染一點(diǎn)緩沖數(shù)據(jù).比如下面getRunData函數(shù)會(huì)渲染能容納三張屏幕高度的列表項(xiàng)數(shù)量,分別對(duì)應(yīng)上屏、中屏和下屏.
中屏即當(dāng)前視口對(duì)應(yīng)的屏幕,上屏和下屏存放著視口上下兩邊沒(méi)有展現(xiàn)的緩沖Dom.首先利用二分法可以查詢到屏幕視口下第一個(gè)列表項(xiàng)元素索引start_index,那么上屏和下屏的首個(gè)列表項(xiàng)索引也能依據(jù)start_index輕松得出.
getRunData (distance = null) {
//滾動(dòng)距離
const scrollTop = distance ? distance : this.$refs.container.scrollTop;
//在哪個(gè)范圍內(nèi)不執(zhí)行滾動(dòng)
if (this.scroll_scale) {
if (scrollTop > this.scroll_scale[0] && scrollTop < this.scroll_scale[1]) {
return;
}
}
//起始索引
let start_index = this.getStartIndex(scrollTop);
start_index = start_index < 0 ? 0 : start_index;
//上屏索引,this.cache_screens默認(rèn)為1,緩存一個(gè)屏幕
let upper_start_index = start_index - this.maxNum * this.cache_screens;
upper_start_index = upper_start_index < 0 ? 0 : upper_start_index;
// 調(diào)整offset
this.$refs.container.style.transform = `translate3d(0,${this.list[upper_start_index].top}px,0)`;
//中間屏幕的元素
const mid_list = this.list.slice(start_index, start_index + this.maxNum);
// 上屏
const upper_list = this.list.slice(upper_start_index, start_index);
// 下屏元素
let down_start_index = start_index + this.maxNum;
down_start_index = down_start_index > this.list.length - 1 ? this.list.length : down_start_index;
this.scroll_scale = [this.list[Math.floor(upper_start_index + this.maxNum / 2)].top, this.list[Math.ceil(start_index + this.maxNum / 2)].top];
const down_list = this.list.slice(down_start_index, down_start_index + this.maxNum * this.cache_screens);
this.runList = [...upper_list, ...mid_list, ...down_list];
}讀到這里，這篇“vue如何實(shí)現(xiàn)虛擬滾動(dòng)”文章已經(jīng)介紹完畢，想要掌握這篇文章的知識(shí)點(diǎn)還需要大家自己動(dòng)手實(shí)踐使用過(guò)才能領(lǐng)會(huì)，如果想了解更多相關(guān)內(nèi)容的文章，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。
新聞名稱：vue如何實(shí)現(xiàn)虛擬滾動(dòng)
標(biāo)題來(lái)源：http://weahome.cn/article/gjddii.html
-
在線咨詢
微信咨詢
電話咨詢
-
028-86922220（工作日）
18980820575（7×24）
-
提交需求
-
返回頂部
重慶分公司
重慶分公司
