visual-scroll-list-lqf v1.0.1-beta.0

Visual-Scroll-List-LQF

虚拟列表插件

install

npm install visual-scroll-list-lqf

usage

• ScrollVisualList 固定高度虚拟列表组件

<template>
  <ScrollVisualList :rowHeight="20" :total="listData.length">
    <template #default="{ index }">
      <span>{{ index }}</span>
    </template>
  </ScrollVisualList>
</template>
<script>
import { defineComponent, ref } from 'vue'
import { ScrollVisualList } from 'scroll-visual-list-lqf'

export default defineComponent({
  setup() {
    const listData = ref([])
    listData.length = 1000
    return {
      listData,
    }
  },
})
</script>

• DynamicScrollVisualList 动态虚拟列表，支持非固定列高度使用

<template>
  <dynamic-visual-scroll-list
    :list-items="listData"
    :estimated-height="20"
    tag="ul"
  >
    <template #default="{ item }">
      <li :style="{ height: 30 + Math.floor(Math.random() * 30) + 'px' }">
        {{ item }}
      </li>
    </template>
  </dynamic-visual-scroll-list>
</template>
<script>
import { defineComponent, ref } from 'vue'
import { DynamicScrollVisualList } from 'scroll-visual-list-lqf'

export default defineComponent({
  setup() {
    const listData = ref([])
    listData.value.length = 1000
    for (let i = 0; i < listData.value.length; i++) {
      listData.value[i] = i
    }

    return {
      listData,
    }
  },
})
</script>