Yy Craft

主题

VirtualList 虚拟列表 ​

基础用法 ​

查看示例
vue
<script setup lang="ts">
import { ref } from 'vue'

const data = ref(
  Array.from({ length: 100 }, (_, i) => {
    return {
      id: i + 1,
      lable: `我是${i + 1}`,
      key: i + 10,
    }
  }),
)
</script>

<template>
  <yy-virtual-list :data="data">
    <template #default="{ item }">
      <yy-p :key="item.id" style="margin: 0">
        {{ item.lable }}
      </yy-p>
    </template>
  </yy-virtual-list>
</template>

重命名键 ​

查看示例
vue
<script setup lang="ts">
import { ref } from 'vue'

const data = ref(
  Array.from({ length: 100 }, (_, i) => ({
    id: i + 1,
    lable: `Item ${i + 1}`,
  })),
)
</script>

<template>
  <yy-virtual-list
    :wrapper-max-size="100"
    key-field="id"
    :data="data"
    :scrollbar-props="{ trigger: 'none' }"
  >
    <template #default="{ item }">
      <yy-p style="margin: 0">
        {{ item.lable }}
      </yy-p>
    </template>
  </yy-virtual-list>
</template>

滚动条 ​

查看示例
vue
<script setup lang="ts">
import { ref } from 'vue'

const data = ref(
  Array.from({ length: 100 }, (_, i) => ({
    id: i + 1,
    lable: `Item ${i + 1}`,
    key: i + 10,
  })),
)
</script>

<template>
  <yy-virtual-list :data="data" :scrollbar-props="{ trigger: 'none' }">
    <template #default="{ item }">
      <yy-p style="margin: 0">
        {{ item.lable }}
      </yy-p>
    </template>
  </yy-virtual-list>
</template>

横向虚拟列表 ​

查看示例
vue
<script setup lang="ts">
import { ref } from 'vue'

const data = ref(
  Array.from({ length: 100 }, (_, i) => ({
    id: i + 1,
    lable: `Item ${i + 1}`,
    key: i + 10,
  })),
)
</script>

<template>
  <yy-virtual-list :data="data" :vertical="false">
    <template #default="{ item }">
      <yy-p style="margin: 0">
        {{ item.lable }}
      </yy-p>
    </template>
  </yy-virtual-list>
</template>

项的大小 ​

查看示例
vue
<script setup lang="ts">
import { ref } from 'vue'

const data = ref(
  Array.from({ length: 100 }, (_, i) => ({
    id: i + 1,
    lable: `Item ${i + 1}`,
    key: i + 10,
  })),
)
</script>

<template>
  <yy-virtual-list :item-size="28" :wrapper-max-size="100" :data="data">
    <template #default="{ item }">
      <yy-p style="margin: 0">
        {{ item.lable }}
      </yy-p>
    </template>
  </yy-virtual-list>
</template>

设置边界 ​

查看示例
vue
<script setup lang="ts">
import { ref } from 'vue'

const data = ref(
  Array.from({ length: 100 }, (_, i) => ({
    id: i + 1,
    lable: `Item ${i + 1}`,
    key: i + 10,
  })),
)
</script>

<template>
  <yy-virtual-list
    :min-bound="-200"
    :max-bound="300"
    :wrapper-max-size="100"
    :data="data"
  >
    <template #default="{ item }">
      <yy-p style="margin: 0">
        {{ item.lable }}
      </yy-p>
    </template>
  </yy-virtual-list>
</template>

关闭虚拟滚动 ​

查看示例
vue
<script setup lang="ts">
import { ref } from 'vue'

const data = ref(
  Array.from({ length: 100 }, (_, i) => {
    return {
      id: i + 1,
      lable: `Item: ${i + 1}`,
      key: i + 10,
    }
  }),
)

const virtual = ref(true)
</script>

<template>
  <yy-flex>
    <yy-button @click="virtual = !virtual">
      切换虚拟列表
    </yy-button>
    <yy-virtual-list :data="data" :virtual-scroll="virtual">
      <template #default="{ item }">
        <yy-p :key="item.id" style="margin: 0">
          {{ item.lable }}
        </yy-p>
      </template>
    </yy-virtual-list>
  </yy-flex>
</template>

方法 ​

查看示例
vue
<script setup lang="ts">
import type { VirtualListExposed } from 'yy-craft'
import { ref } from 'vue'

const data = ref(
  Array.from({ length: 100 })
    .fill(0)
    .map((_, i) => ({ id: i + 1, lable: `Item ${i + 1}`, key: i + 10 })),
)
const vlInstance = ref<VirtualListExposed>()
const scrollTo: VirtualListExposed['scrollTo'] = (...options: any[]) => {
  vlInstance.value?.scrollTo(...options)
}
</script>

<template>
  <yy-flex>
    <yy-button @click="scrollTo(0, 1500)">
      滚动到指定y距离
    </yy-button>
    <yy-button @click="scrollTo({ top: 1500, behavior: 'smooth' })">
      平滑滚动到指定top距离
    </yy-button>
    <yy-button @click="scrollTo({ distance: 1500, behavior: 'smooth' })">
      平滑滚动到指定距离
    </yy-button>
    <yy-button @click="scrollTo({ index: 50 })">
      滚动到指定index
    </yy-button>
    <yy-button @click="scrollTo({ index: 50, behavior: 'smooth' })">
      平滑滚动到指定index
    </yy-button>
    <yy-button @click="scrollTo({ position: 'top' })">
      滚动到top
    </yy-button>
    <yy-button @click="scrollTo({ position: 'top', behavior: 'smooth' })">
      平滑滚动到top
    </yy-button>
    <yy-button @click="scrollTo({ position: 'bottom' })">
      滚动到bottom
    </yy-button>
    <yy-button @click="scrollTo({ position: 'bottom', behavior: 'smooth' })">
      平滑滚动到bottom
    </yy-button>
    <yy-button @click="scrollTo({ key: 50 })">
      滚动到key50
    </yy-button>
    <yy-button @click="scrollTo({ key: 50, behavior: 'smooth' })">
      平滑滚动到key50
    </yy-button>
  </yy-flex>

  <yy-virtual-list ref="vlInstance" :data="data">
    <template #default="{ item }">
      <yy-p style="margin: 0">
        {{ item.lable }}
      </yy-p>
    </template>
  </yy-virtual-list>
</template>

Props ​

参数说明类型默认值
scrollbarProps滚动条配置ScrollbarProps-
virtualScroll是否使用虚拟滚动booleantrue
data列表数据any[]-
wrapperMaxSize滚动区域最大尺寸number500
vertical是否为纵向booleantrue
itemSize每项高度/宽度number27
minBound最小边界number-100
maxBound最大边界numberwrapperMaxSize
keyField每一项的key字段别名string'key'

方法 ​

名称说明类型
scrollTo滚动到指定位置ScrollTo