當資料量較大(此處設定為10w),而且要用列表的形式展現給使用者,如果我們不做處理的話,在瀏覽器中渲染10w dom節點,是極其耗費時間的,那我的macbook air舉例,10w條資料渲染出來到能看到頁面,需要13秒多(實際應該是10秒左右),如果是使用者的話肯定是不會等乙個網頁十幾秒的
我們可以用虛擬列表解決這個問題
一步步來
首先看一下效果
這是data中的資料
data()
, container:
, pos:1,
// 第一排顯示的元素的下標
max_num:1
,// 在容器內最多顯示幾個列表項
timer:
null
,// 定時器
carriedout:
true
,// 能不能執行操作};
},
mounted()
this
.test();},
test()
=this
;// 計算可視區域最多能顯示多少個li
this
.max_num
= math.
ceil
(container.height / li.height)
;// 獲取 overflow:scroll 的元素已滾動的高度
let scrolltop =
this
.$refs.container.scrolltop;
// 計算當前處於第一排的元素的下標
this
.pos = math.
round
(scrolltop / li.height)
;// 下方節流操作
this
.carriedout =
false
;this
.timer =
settimeout((
)=>,50
);}}
,
computed:,}
,
="virtual-list"
>
/h1>
="container" ref=
"container"
:style=
"`height:$px`" @scroll=
"test"
>
"`height:$px;padding-top:$px`"
>
"`height:$px`" v-
for=
"item in 100000"
:key=
"item"
>
}<
/li>
<
/ul>
<
/div>
<
/div>完整源**
="virtual-list"
>
/h1>
="container" ref=
"container"
:style=
"`height:$px`" @scroll=
"test"
>
"`height:$px;padding-top:$px`"
>
"`height:$px`" v-
for=
"item of showlist"
:key=
"item"
>
}<
/li>
<
/ul>
<
/div>
<
/div>
<
/template>
export
default
, container:
, pos:1,
// 第一排顯示的元素的下標
max_num:1
,// 在容器內最多顯示幾個列表項
timer:
null
,// 定時器
carriedout:
true
,// 能不能執行操作};
},mounted()
this
.test()
;}, computed:,}
, methods:
=this
;// 計算可視區域最多能顯示多少個li
this
.max_num
= math.
ceil
(container.height / li.height)
;// 獲取 overflow:scroll 的元素已滾動的高度
let scrolltop =
this
.$refs.container.scrolltop;
// 計算當前處於第一排的元素的下標
this
.pos = math.
round
(scrolltop / li.height)
;// 下方節流操作
this
.carriedout =
false
;this
.timer =
settimeout((
)=>,50
);}}
,},}
;<
/script>
vue實現城市列表選擇
成果展示 最後的成果就是下面所展示的內容，因為gif圖沒有做，只能截圖所展示，接下來，會帶著大家一步一步的完成下面功能，腳手架搭建和node安裝在本次案例不會講解，如果了解，可以在我的找到有詳細介紹 準備工作 引入axios外掛程式，呼叫better scroll第三方外掛程式，本地json檔案，可...
基於duilib的虛擬列表實現
本文由作者鄒啟文授權網易雲社群發布。在郵箱大師選擇duilib作為ui開發庫後，我們面臨這樣乙個問題。隨著時間的積累，使用者資料會越來越多，如何保證我們的軟體在展示這些資料時依然保持非常好的體驗？原生態duilib列表的實現是，資料與控制項 列表的每一項 一一對應，即有多少資料，便有多少控制項。通過...
vue遞迴元件實現多級列表
這次我們主要是實現乙個資訊的分類展示列表存在二級 的分類，如下如所示 看到這個很多人會想到這個實現起來很簡單啊，來個巢狀迴圈不就完事了。對，你說的沒錯，事實就是這樣簡單。那麼就先來看看這麼簡單的列表怎麼實現的，然後這個方案的劣勢在 首先看看我們的資料格式 list 基於上面的資料格式，我們的實現方式...