快捷導(dǎo)航

vue實現(xiàn)虛擬滾動渲染成千上萬條數(shù)據(jù)

更新時間：2023年02月10日 09:25:24 作者：永遠(yuǎn)不會太晚

本文主要介紹了vue實現(xiàn)虛擬滾動渲染成千上萬條數(shù)據(jù)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

html渲染成千上萬的dom會導(dǎo)致瀏覽器卡頓乃至卡死，虛擬滾動就是解決方案之一
頁面只需要渲染可視區(qū)域的dom，當(dāng)用戶進行滾動時根據(jù)滾動高度進行可視區(qū)域dom的更新，從而達(dá)到無感滾動效果

思路：

根據(jù)數(shù)據(jù)條數(shù)計算相應(yīng)高度，使用dom占位，從而生成相應(yīng)高度滾動列表，用戶可以自由滾動
監(jiān)聽滾動列表的scroll事件
根據(jù)scrollTop進行slice數(shù)組，取出相應(yīng)下標(biāo)數(shù)據(jù)
根據(jù)scrollTop值控制虛擬列表偏移，使其始終在用戶可視區(qū)域內(nèi)
上下需要預(yù)留一些dom，避免用戶滾動過快出現(xiàn)白屏
使用fixed，absolute，transform避免頁面回流

代碼量其實還是很少的，重點是理解思路

<template>
? <div class="device">
? ? <div class="vir-scroll">
? ? ? <div class="scroll-Y" @scroll="scroll">
? ? ? ? <div class="parentDom">
? ? ? ? ? <!-- 占位，根據(jù)數(shù)據(jù)條數(shù)生成滾動列表 -->
? ? ? ? ? <div :style="{ height: screenHeight + 'px' }"></div>
? ? ? ? ? ?<!-- 虛擬滾動列表 -->
? ? ? ? ? <div class="positionRelative" :style="{ transform: getTransform }">
? ? ? ? ? ? <div class="scroll-item" v-for="item in visibleData" :key="item.index">
? ? ? ? ? ? ? <div class="scroll-info">helloworld</div>
? ? ? ? ? ? </div>
? ? ? ? ? </div>
? ? ? ? </div>
? ? ? </div>
? ? </div>
? </div>
</template>
<script>
export default {
? data() {
? ? return {
? ? ? /** 數(shù)據(jù)列表 */
? ? ? dataList: [],
? ? ? /** 單行高度 */
? ? ? itemHeight: 143,
? ? ? /** 偏移高度 */
? ? ? startOffset: 0,
? ? ? /** 起始顯示數(shù)據(jù) */
? ? ? start: 0,
? ? ? /** 結(jié)束顯示數(shù)據(jù) */
? ? ? end: 10,
? ? }
? },
? computed: {
? ? /** 根據(jù)每條數(shù)據(jù)的高度獲取總列表高度 */
? ? screenHeight() {
? ? ? return this.dataList.length * this.itemHeight
? ? },
? ? /** 前面預(yù)留 */
? ? prevCount() {
? ? ? return 8
? ? },
? ? /** 后面預(yù)留 */
? ? nextCount() {
? ? ? return 25
? ? },
? ? /** 每次截取虛擬列表的位置 */
? ? getTransform() {
? ? ? return `translate(0,${this.startOffset}px)`
? ? },
? ? /** 虛擬數(shù)據(jù) */
? ? visibleData() {
? ? ? return this.dataList.slice(this.start, Math.min(this.end, this.dataList.length))
? ? },
? },
? methods: {
? ? /** 列表滾動，暫時不節(jié)流，因為滾動快觸發(fā)次數(shù)就少，容易導(dǎo)致沒有及時更新數(shù)組導(dǎo)致白屏 */
? ? scroll(e) {
? ? ? this.scrollThrottle(e.target.scrollTop)
? ? },
? ? /** 滾動函數(shù) */
? ? scrollThrottle(scrollTop) {
? ? ? const topCount = Math.floor(scrollTop / this.itemHeight) - this.prevCount
? ? ? // 此時的開始索引
? ? ? this.start = topCount >= 0 ? topCount : 0
? ? ? // 此時的結(jié)束索引
? ? ? this.end = this.start + this.nextCount
? ? ? // 此時的偏移量
? ? ? this.startOffset = this.start * this.itemHeight
? ? },
? },
}
</script>
<style scoped lang="scss">
.device {
? .vir-scroll {
? ? // 脫離文檔流避免回流
? ? position: fixed;
? ? left: 0;
? ? width: 100%;
? ? height: calc(100% - 196px);
? ? padding: 0 16px;
? ? z-index: 10;

? ? .scroll-Y {
? ? ? width: 100%;
? ? ? height: 100%;
? ? ? overflow-y: auto;

? ? ? .parentDom {
? ? ? ? position: relative;

? ? ? ? .positionRelative {
? ? ? ? ? width: 100%;
? ? ? ? ? position: absolute;
? ? ? ? ? left: 0;
? ? ? ? ? top: 0;
? ? ? ? ? border-radius: 5px;
? ? ? ? ? padding-bottom: 12.5px;

? ? ? ? ? .scroll-item {
? ? ? ? ? ? height: 143px;
? ? ? ? ? ? background-color: #ffffff;
? ? ? ? ? ? font-size: 12px;
? ? ? ? ? ? padding: 10px 15px 0px 15px;
? ? ? ? ? }
? ? ? ? }
? ? ? }
? ? }
? }
}
</style>

到此這篇關(guān)于vue實現(xiàn)虛擬滾動渲染成千上萬條數(shù)據(jù)的文章就介紹到這了,更多相關(guān)vue 虛擬滾動渲染內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: