目錄前言滾動(dòng)原理實(shí)現(xiàn)源代碼參考前言

移動(dòng)端網(wǎng)頁(yè)的日常開發(fā)中,偶爾會(huì)包含一些渲染長(zhǎng)列表的場(chǎng)景.比如某旅游網(wǎng)站需要完全展示出全國(guó)的城市列表,再有將所有通訊錄的姓名按照A,B,C...首字母依次排序展示.

長(zhǎng)列表的數(shù)量一般在幾百條范圍內(nèi)不會(huì)出現(xiàn)意外的效果,瀏覽器本身足以支撐.可一旦數(shù)量級(jí)達(dá)到上千,頁(yè)面渲染過程會(huì)出現(xiàn)明顯的卡頓.數(shù)量突破上萬甚至十幾萬時(shí),網(wǎng)頁(yè)可能直接崩潰了.

為了解決長(zhǎng)列表造成的渲染壓力,業(yè)界出現(xiàn)了相應(yīng)的應(yīng)對(duì)技術(shù),即長(zhǎng)列表的虛擬滾動(dòng).

虛擬滾動(dòng)的本質(zhì),不管頁(yè)面如何滑動(dòng),HTML 文檔只渲染當(dāng)前屏幕視口展現(xiàn)出來的少量Dom元素.

假設(shè)長(zhǎng)列表有10萬條數(shù)據(jù),對(duì)用戶而言,他永遠(yuǎn)只會(huì)看到屏幕展現(xiàn)出的那十幾條數(shù)據(jù).因此頁(yè)面滑動(dòng)時(shí),通過監(jiān)聽滾動(dòng)事件快速切換視口的數(shù)據(jù),就能高度模擬滾動(dòng)效果.

虛擬滾動(dòng)最終只需要渲染少量的Dom元素就能模擬出相似的滾動(dòng)效果,這讓前端工程師開發(fā)幾萬甚至十幾萬條的長(zhǎng)列表都成為了可能.

下圖是手機(jī)上實(shí)測(cè)滑動(dòng)一張涵蓋全球所有城市的長(zhǎng)列表頁(yè)面(源代碼貼在了文章結(jié)尾).

滾動(dòng)原理

為了理解虛擬滾動(dòng)的實(shí)現(xiàn)原理,首先觀察下面圖片.手指向下滑動(dòng)時(shí),HTML頁(yè)面也會(huì)隨之向上滾動(dòng).通過圖片標(biāo)記的距離,我們可以得出這樣的結(jié)論.當(dāng)屏幕視口的上邊沿和id為item的div元素上邊沿重合時(shí),item元素距離長(zhǎng)列表頂部的距離剛好等于頁(yè)面的滾動(dòng)距離scrollTop(這個(gè)結(jié)論會(huì)在后面計(jì)算距離時(shí)用到).

虛擬滾動(dòng)為了模擬出逼真的滾動(dòng)效果,首先應(yīng)該滿足以下兩個(gè)要求.

虛擬滾動(dòng)列表的滾動(dòng)條和普通列表保持一致.比如列表包含1000條數(shù)據(jù),當(dāng)瀏覽器使用普通渲染的方式,假設(shè)滾動(dòng)條需要向下滾動(dòng)5000px才能貼底.那么應(yīng)用虛擬滾動(dòng)技術(shù)后,滾動(dòng)條也應(yīng)該保證具備相同的特征,向下滾動(dòng)5000px才能貼底. 虛擬滾動(dòng)只會(huì)渲染視口以及上下兩側(cè)的部分Dom元素.隨著滾動(dòng)條往下滑動(dòng),視圖的內(nèi)容要實(shí)時(shí)更新,保證同普通渲染長(zhǎng)列表時(shí),看到的內(nèi)容一致.

為了滿足上面的要求,html設(shè)計(jì)結(jié)構(gòu)如下.

.wrapper是最外層的容器元素,position設(shè)置成absolute或relative,子元素依據(jù)它做定位.

子元素.background和.list是實(shí)現(xiàn)虛擬滾動(dòng)的關(guān)鍵..background是一個(gè)空的div,但它需要設(shè)置高度,高度值等于長(zhǎng)列表所有列表項(xiàng)高度相加的總和.另外還要將其設(shè)置成絕對(duì)定位,z-index的值置為-1.

.list內(nèi)部負(fù)責(zé)動(dòng)態(tài)渲染視口觀察到的Dom元素,position設(shè)置成absolute.

<template> <div class='wrapper'> <div :style='{height:`${total_height}px`}'></div> <div class='list'> <div class='line'><div class='item lt'>BEIJING</div><div class='item gt'>北京</div> </div> <div class='line'><div class='item lt'>shanghai</div><div class='item gt'>上海</div> </div> <div class='line'><div class='item lt'>guangzhou</div><div class='item gt'>廣州</div> </div> ... //省略 </div> </div></template><style lang='scss' scoped>.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; }}</style>

假如上面代碼total_height等于10000px,頁(yè)面運(yùn)行效果圖如下所示.由于子元素.background設(shè)置了高度,父元素.wrapper就會(huì)被子元素支撐起來,同時(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.通過觀察以上行為可知,.background雖然只是一個(gè)空的div，但是通過給它賦予列表的總高度,可以讓右側(cè)的滾動(dòng)條和普通長(zhǎng)列表渲染產(chǎn)生的滾動(dòng)條保持外觀和行為上一致.

滾動(dòng)條的問題解決了,但隨著滾動(dòng)條往下滑,數(shù)據(jù)列表隨之上移,列表全部移出了屏幕之后,接下來的滑動(dòng)全是白屏.為了解決白屏問題,視口必須始終展現(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)過上面的講解,虛擬滾動(dòng)的實(shí)現(xiàn)邏輯已經(jīng)清晰.首先js監(jiān)聽滾動(dòng)條的滑動(dòng)事件,再通過滑動(dòng)距離計(jì)算出.list元素要渲染哪些子元素,其次更新.list元素位置.滾動(dòng)條不斷滑動(dòng)時(shí),子元素和位置也不斷更新,視口上便模擬出了滾動(dòng)效果.

實(shí)現(xiàn)

開發(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)(代碼如下).

通過以下方法處理,每一個(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是父容器高度,按照最小高度來計(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).

<template>模板里面只需要遍歷視口需要展現(xiàn)的數(shù)據(jù)runList,數(shù)組runList包含的數(shù)據(jù)會(huì)隨著滾動(dòng)事件不斷更新.

<template> <div ref='wrapper' @scroll='onScroll'> <div :style='{height:`${total_height}px`}'></div> <div ref='container'> <div v-for='item in runList' : :key='item'><div class='item lt'>{{item.data.name}}</div><div class='item gt'>{{item.data.value}}</div><div v-if='item.data.type == 3' class='img-container'> <img src='http://www.hdgsjgj.cn/assets/default.png' /></div> </div> </div> </div></template>

滾動(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)過程中,如果視口的上邊沿和某個(gè)列表項(xiàng)的上邊沿剛好重合時(shí),滑動(dòng)距離scrollTop剛好等于該列表項(xiàng)距離長(zhǎng)列表頂部的距離top.

那么此時(shí)如果頁(yè)面再往上挪動(dòng)一點(diǎn),視口下第一個(gè)列表項(xiàng)只顯示了部分,另一部分劃出了屏幕外看不見.這時(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.接下來進(jìn)入核心函數(shù)getRunData(代碼如下).它主要做了以下兩件事.

動(dòng)態(tài)更新runList列表數(shù)據(jù) 動(dòng)態(tài)更新.list長(zhǎng)列表元素的的位置

實(shí)際開發(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ì)有白屏閃爍.

解決此問題的方法可以在HTML文檔上多渲染一點(diǎn)緩沖數(shù)據(jù).比如下面getRunData函數(shù)會(huì)渲染能容納三張屏幕高度的列表項(xiàng)數(shù)量,分別對(duì)應(yīng)上屏、中屏和下屏.

中屏即當(dāng)前視口對(duì)應(yīng)的屏幕,上屏和下屏存放著視口上下兩邊沒有展現(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]; }

滾動(dòng)事件觸發(fā)的頻率很高,作為開發(fā)者而言,我們要盡可能減少瀏覽器的計(jì)算量.因此組件內(nèi)可以緩存一個(gè)滾動(dòng)范圍,即數(shù)組this.scroll_scale(數(shù)據(jù)結(jié)構(gòu)類似于[5000,5675]),滑動(dòng)距離處于該范圍下,瀏覽器不用更新列表數(shù)據(jù).

滾動(dòng)距離scrollTop一旦處于滾動(dòng)范圍內(nèi),getRunData函數(shù)不做任何操作,手指滑動(dòng)時(shí)就利用默認(rèn)的滾動(dòng)行為,讓.list元素隨著手指上下移動(dòng).

假設(shè)滾動(dòng)方向向下,當(dāng)scrollTop跑出了滾動(dòng)范圍后,滑動(dòng)視口.wrapper的上邊沿和下一個(gè)列表項(xiàng)上邊沿重合的一瞬間,getRunData函數(shù)先計(jì)算出起始索引start_index,再通過start_index得到上屏第一個(gè)元素索引upper_start_index.

由于之前組件掛載時(shí)每個(gè)列表項(xiàng)都緩存了自己距離長(zhǎng)列表頂部的距離,因此通過this.list[upper_start_index].top就能拿到.list元素應(yīng)該被賦予的位置信息.然后重新計(jì)算出新的列表數(shù)據(jù)runList渲染頁(yè)面,并緩存新狀態(tài)下的滾動(dòng)范圍.

至此虛擬滾動(dòng)通過以上幾步操作就實(shí)現(xiàn)了.上面介紹的實(shí)踐方法雖然用起來很簡(jiǎn)單,但前提需要設(shè)計(jì)師規(guī)劃設(shè)計(jì)稿時(shí)將不同樣式列表項(xiàng)的高度率先定義.

如果列表項(xiàng)的高度需要根據(jù)里面內(nèi)容自然撐開,無法做到在頁(yè)面設(shè)計(jì)時(shí)定死,可以閱讀下面的參考文章實(shí)現(xiàn).雖然列表項(xiàng)高度自適應(yīng)情形下實(shí)現(xiàn)的虛擬滾動(dòng)聽上去很誘人,但是它需要增加額外的處理步驟以及面對(duì)新的問題(比如列表項(xiàng)包含異步加載的圖片時(shí),高度計(jì)算會(huì)變的困難),另外還會(huì)大大增加瀏覽器的計(jì)算量.因此設(shè)計(jì)稿的列表項(xiàng)是否需要定義高度可依據(jù)具體場(chǎng)景而定.

源代碼

源代碼

參考

高性能渲染十萬條數(shù)據(jù)新手也能看懂的虛擬滾動(dòng)實(shí)現(xiàn)方法淺說虛擬列表的實(shí)現(xiàn)原理

到此這篇關(guān)于vue輕松實(shí)現(xiàn)虛擬滾動(dòng)的示例代碼的文章就介紹到這了,更多相關(guān)vue 虛擬滾動(dòng)內(nèi)容請(qǐng)搜索好吧啦網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持好吧啦網(wǎng)！