前言
我們常常在開發畫面往往遇到最頭痛的問題就是效能問題，一個好的功能如果沒有流暢的操作畫面，我想寫得再多功能也是於事無補，特別是在使用v-for時 如果我們要渲染幾萬筆資料往往是畫面還沒出來就先卡住了，更何況是Mobile版本，所以就有了我們的virtual-scroll，這邊我就寫個簡單的範例，一方面也當作練習，廢話不多 我們先看實現效果
可以發現我們可視的畫面是固定的我們卻可以實現大量list效果的顯示
思路
例如我們有一萬筆資料 我只想每次渲染五筆 這時候第一步我們需要個虛擬的主要是要顯示我們的卷軸用這個 例如一萬筆高度乘以每筆30px ，再來高度有了 每五筆的渲染呢 就是要透過我們每次捲動時計算scrollTop在這個位置時我們的資料畫面的第一筆至第五筆的是在第幾筆資料的可見區域進行渲染，簡單講就是我們卷軸再捲時我們再透過translate調整Y軸固定我們顯示的位置，我知道這樣講解可能不太清楚我們就直接看程式碼吧 我也有放在我的github(https://github.com/MarsCaiWORD/Vue-virtual-scroll)
沒有留言:
張貼留言