vue虛擬化列表封裝的實(shí)現(xiàn)

更新時(shí)間：2022年06月06日 09:21:46 作者：郭俊強(qiáng)

這篇文章主要介紹了vue實(shí)現(xiàn)虛擬化列表封裝方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

vue虛擬化列表封裝

將下面代碼復(fù)制一份到自己的項(xiàng)目中

<template>
    <div class="scrollParent" ref="scrollContent" @scroll="handleScroll">
        <div :style="blankFillStyle">
            <div v-for="item,index in showDataList" :key="index">
                <slot :everyVirtual="item"></slot>
            </div>
        </div>
    </div>
</template>

<script>
export default {
? ? props:["oneHeight","virtualList"],
? ? data () {
? ? ? ? return {
? ? ? ? ? ? contentSize:"", //可視區(qū)域可以展示多少條數(shù)據(jù)
? ? ? ? ? ? startIndex:0, //記錄當(dāng)前滾動(dòng)的第一個(gè)元素的索引
? ? ? ? ? ? currentScroll:0, ?//記錄當(dāng)前滾動(dòng)的距離
? ? ? ? }
? ? },
? ? methods:{
? ? ? ? // 獲取可視區(qū)域可以展示多少條
? ? ? ? getContentSize(){
? ? ? ? ? ? // 兩次取反可以獲取到整數(shù)部分
? ? ? ? ? ? this.contentSize = ~~(this.$refs.scrollContent.offsetHeight / this.oneHeight) + 2;
? ? ? ? },
? ? ? ? // 監(jiān)聽(tīng)滾動(dòng)條
? ? ? ? handleScroll(){
? ? ? ? ? ? // 持續(xù)滾動(dòng) ?減少變量重新賦值 ?優(yōu)化處理 只有在到下一個(gè)元素節(jié)點(diǎn)的時(shí)候才會(huì)重新給this.statrIndex賦值 ?避免和this.startIndex相關(guān)聯(lián)的數(shù)據(jù)再次計(jì)算
? ? ? ? ? ? this.currentScroll = this.$refs.scrollContent.scrollTop;
? ? ? ? ? ? let currentIndex = ~~(this.$refs.scrollContent.scrollTop/this.oneHeight);
? ? ? ? ? ? if(this.startIndex == currentIndex){
? ? ? ? ? ? ? ? return
? ? ? ? ? ? }
? ? ? ? ? ? this.startIndex = currentIndex;
? ? ? ? ? ? if((this.startIndex + this.contentSize - 1)>this.virtualList.length-1){ //說(shuō)明到達(dá)底部了
? ? ? ? ? ? ? ? this.$emit("scrollEnd")
? ? ? ? ? ? }
? ? ? ? }
? ? },
? ? activated(){
? ? ? ? this.$nextTick(()=>{
? ? ? ? ? ? this.$refs.scrollContent.scrollTop = this.currentScroll;
? ? ? ? })
? ? },
? ? computed:{
? ? ? ? endIndex(){ //獲取最后一個(gè)元素的索引
? ? ? ? ? ? let endIndex = this.startIndex + this.contentSize*2;
? ? ? ? ? ? if(endIndex>this.virtualList.length-1){
? ? ? ? ? ? ? ? endIndex = this.virtualList.length-1
? ? ? ? ? ? }
? ? ? ? ? ? return endIndex;
? ? ? ? },
? ? ? ? showDataList(){
? ? ? ? ? ? let startIndex = 0;
? ? ? ? ? ? if(this.startIndex<=this.contentSize){
? ? ? ? ? ? ? ? startIndex = 0;
? ? ? ? ? ? }else{
? ? ? ? ? ? ? ? startIndex = this.startIndex - this.contentSize;
? ? ? ? ? ? }
? ? ? ? ? ? return this.virtualList.slice(startIndex,this.endIndex);
? ? ? ? },
? ? ? ? blankFillStyle(){
? ? ? ? ? ? let startIndex = 0;
? ? ? ? ? ? if(this.startIndex<=this.contentSize){
? ? ? ? ? ? ? ? startIndex = 0;
? ? ? ? ? ? }else{
? ? ? ? ? ? ? ? startIndex = this.startIndex - this.contentSize;
? ? ? ? ? ? }
? ? ? ? ? ? return{
? ? ? ? ? ? ? ? paddingTop:startIndex * this.oneHeight + "px",
? ? ? ? ? ? ? ? paddingBottom:(this.virtualList.length - this.endIndex) * this.oneHeight +"px"
? ? ? ? ? ? }
? ? ? ? }
? ? },
? ? mounted(){
? ? ? ? window.onresize = this.getContentSize();
? ? ? ? window.orientationchange = this.getContentSize();
? ? }
}
</script>

<style scoped>
? ? .scrollParent{
? ? ? ? height: 100%;
? ? ? ? width: 100%;
? ? ? ? overflow-y: auto;
? ? }
</style>

vue虛擬列表-vue-virtual-scroll-list

使用場(chǎng)景

因?yàn)楣咀隽祟?lèi)似于百度網(wǎng)盤(pán)的競(jìng)品，所以用戶(hù)如果上傳了很多的文件，就會(huì)造成頁(yè)面DOM元素的過(guò)多，然后因?yàn)樾枰僮鱀OM元素，所以頁(yè)面會(huì)變得很卡。所以用虛擬列表來(lái)解決。

安裝

安裝的話這個(gè)插件有2個(gè)版本的，一個(gè)是1版本，目前更新到2版本了，二版本功能更加的強(qiáng)大。這里使用了1版本，通俗易懂一點(diǎn)。

npm install --save vue-virtual-scroll-list@1.1.3

使用

在單頁(yè)面中導(dǎo)入

import VirtualList from "vue-virtual-scroll-list";

components: {
    VirtualList,//注冊(cè)組件
  },

          <div class="content-timeview_box">
            <!-- size代表行高 remain代表一次渲染的數(shù)量 -->
            <!-- 出現(xiàn)的問(wèn)題：1.在時(shí)間視圖時(shí)（文件夾視圖只有一個(gè)VirtualList不受影響） 一個(gè)日期代表一個(gè)VirtualList 怎么解決高度問(wèn)題？ -->
            <!-- 如果統(tǒng)一高度？一個(gè)日期中的文件數(shù)量少于高度 就會(huì)出現(xiàn)VirtualList之間的空白問(wèn)題 -->
            <!-- 應(yīng)該根據(jù)日期下的文件數(shù)量來(lái)動(dòng)態(tài)的綁定每一個(gè)VirtualList的高度 -->
          <VirtualList
          :size="40"
          :remain="17" 
          :wclass="vuesrollboxviewClass"
          :tobottom="toBottom"
          style="padding: 0 32px 0 32px"
          :style="{height:itembig.items.length>6?scrollbarheight:'200px'}"
        >

toBottom的方法，這個(gè)地方就很坑，因?yàn)槲抑荒茉?.1.3版本中觸發(fā)這個(gè)方法，1版本的其他版本號(hào)我沒(méi)有觸發(fā)成功，應(yīng)該還是高度的問(wèn)題。
toBottom：滾動(dòng)到底部時(shí)觸發(fā)，請(qǐng)求下一組數(shù)據(jù)

    //滾到底部時(shí)觸發(fā)
    //注：此方法在1.0高版本不兼容，只能在官方文檔1.1.3版本中使用
    //@1.1.3
    toBottom() {
      this.infiniteHandler();
    },

:wclass=“vuesrollboxviewClass”

wclass是自定義的class，我這里的業(yè)務(wù)場(chǎng)景不是每行只有1個(gè)數(shù)據(jù)，從上而下排列下來(lái)，而是每行根據(jù)分辨率不同，展示5個(gè)或6個(gè)，所以得計(jì)算好一次渲染的個(gè)數(shù)，需要?jiǎng)討B(tài)的綁定。