vue 滾動加載無限長列表

結合vue-infinite-scroll和vue-virtual-sroller實現滾動加載無限長列表，帶有虛擬化（virtualization）功能，能夠提高數據量大時候長列表的性能，解決列表數據量大頁面卡頓問題

滾動加載vue-infinite-scroll

vue-infinite-scroll文檔

採用指令方式實現滾動到底部加載

安裝

npm install vue-infinite-scroll --save

使用

<template>
 <div
    v-infinite-scroll="loadMore"
    infinite-scroll-disabled="busy"
    infinite-scroll-distance="10"
  >
    {{ item.value }}
  </div>
</template>

import infiniteScroll from 'vue-infinite-scroll'

export default {
    directives: { infiniteScroll },
    methods: {
        loadMore () {}
    }
}

 

虛擬化加載

vue-virtual-scroller文檔

安裝

npm install --save vue-virtual-scroller

使用

import { RecycleScroller } from 'vue-virtual-scroller'
import 'vue-virtual-scroller/dist/vue-virtual-scroller.css'

Vue.component('RecycleScroller', RecycleScroller)

<RecycleScroller
    class="scroller"
    :items="list"
    :item-size="50"
    key-field="id"
    v-slot="{ item }"
  >
    <div class="user">
      {{ item.value }}
    </div>
  </RecycleScroller>

重要：設置高度，否則無效

.scroller {
  height: 200px;
}

結合使用

<RecycleScroller
    class="scroller"
    :items="list"
    :item-size="50"
    key-field="id"
    v-slot="{ item }"
    v-infinite-scroll="loadMore"
    infinite-scroll-disabled="busy"
    infinite-scroll-distance="10"
  >
    <div class="user">
      {{ item.value }}
    </div>
  </RecycleScroller>

如何切換列表數據

如tab類型，點擊另一個重新加載列表數據

可以先把原list設置[]，然後設置新數組

先設置成[]是爲了讓滾動條回到最頂部，需要在$nextTick裏設置新數組

this.list = []
this.$nextTick(() => {
    this.list = otherList
})

效果如下：列表項已經有132數據，但是dom節點始終只有13個，以此保證性能

可能遇到的問題

1、滾動不加載，即loadMore方法不調用？

    有可能是因爲你的元素包裹在v-if下，這樣不會觸發

2、無限滾動虛擬節點滾到下面都是空白？

    首先，你最好不要修改組件的樣式，否則可能導致虛擬加載失效

    然後   item-size="32" 設置一下

3、虛擬加載沒有生效，加載出了全部節點？

    滾動區域要設置高度

4、切換數據滾動條沒有回到頂部

    可以先把原list設置[]，然後在$nextTick裏設置新數組

 

測試代碼