vue-virtual-scroller-list虛擬滾動

vue-virtual-scroller-list虛擬滾動

• 一個虛擬滾動組件，用來處理非常長的或者無限滾動的列表。
• 通過不渲染可視區域以外的內容，顯示虛擬的滾動條來
• 將可視區域范圍內的條目渲染出來，用戶滾動，會處理滾動行為(虛擬的滾動條)，動態重新執行更新渲染。dom復用，不需要消耗太多資源，滾動時，cpu換內存，提升頁面性能

安裝，打包后項目運行也需要用。

npm install vue-virtual-scroll-list

頁面使用

<template>
  <div>
    <virtual-list
      style="height: 300px; overflow-y: auto"
      class="virtual-list"
      :data-key="'id'"
      :data-sources="goodsList"
      :data-component="itemComponent"
      :extra-props="{
        itemClick: itemClick,
        current: current,
      }"
    />
  </div>
  <!-- 
      data-key:循環內容的key,
      data-sources:循環的數據
      data-component:循環的內容,這里由VirtualItem.vue
      extra-prop:其他要傳入循環內容的props
   -->
</template>
<script>
import VirtualList from "vue-virtual-scroll-list";
import VirtualItem from "./VirtualItem";
export default {
  name: "",
  components: {
    VirtualList,
  },
  data() {
    return {
      itemComponent: VirtualItem, //虛擬滾動組件循環對象
      current: "",
      goodsList: [//要循環的數據
        { id: "1", value: "商品1" },
        { id: "2", value: "商品2" },
        { id: "3", value: "商品3" },
        { id: "4", value: "商品4" },
        { id: "5", value: "商品5" },
        { id: "6", value: "商品6" },
        { id: "7", value: "商品7" },
        { id: "8", value: "商品8" },
        { id: "9", value: "商品9" },
        { id: "10", value: "商品10" },
        { id: "11", value: "商品11" },
        { id: "12", value: "商品12" },
        { id: "13", value: "商品13" },
        { id: "14", value: "商品14" },
      ], 
    };
  },
  methods: {
    itemClick(inedx) {
        console.log(inedx);
    },
  },
};
</script>

這里將循環對象單獨寫了一個VirtualItem.vue文件

<template>
  <div
    class="item"
    @mouseover="itemClick(index)"
  >
    {{ this.source.value }} <!--這里簡單的輸出了行數據里的value-->
  </div>
</template>
<script>
export default {
  props: {
    // 每一行的索引,基礎props，不用傳遞
    index: {
      type: Number
    },
    // 每一行的內容,基礎props，不用傳遞
    source: {
      type: Object,
      default() {
        return {}
      }
    },
    current: String,
    itemClick: Function
  }
}
</script>

學習：
官方文檔