虚拟列表组件

recycle-list 是 App 端 nvue 专用的高性能列表组件，专为长列表展示优化设计。与传统的 list 组件相比，recycle-list 具有更高的性能，它不仅能回收不可见区域的渲染资源，还在数据结构上进行了更多优化，非常适合展示大量数据的场景。

1. 什么是 recycle-list 组件？

recycle-list 是用于 nvue 页面的高效列表组件，它通过回收不可见区域的渲染资源来降低内存占用，并通过高效的数据处理机制提升渲染速度。与 list 组件相比，recycle-list 的性能更高，但其写法和使用上有一定限制。

使用场景

• 高性能长列表展示：适用于需要展示大量数据的应用，如商品列表、社交媒体内容流等场景。
• 优化内存使用：通过回收不可见区域的渲染资源，减少内存占用，提升应用性能。
• 多模板支持：通过 cell-slot 支持多个模板类型的列表展示。

2. recycle-list 组件的常用属性

recycle-list 通过 cell-slot 定义列表项的模板，每个模板可用于展示不同类型的数据。recycle-list 组件使用 for 来绑定数据，并支持通过 switch 和 case 来选择使用不同的模板。

属性名	类型	说明
for	String	用于循环数据，类似 v-for，在 recycle-list 中定义循环的子节点。
switch	String	用于指定数据中用于区分模板类型的字段名，配合 cell-slot 中的 case 使用。

2.1 定义循环展示列表

• 说明：通过 for 属性循环展示数据列表，类似 v-for，但 recycle-list 专门用于高效地渲染和回收。
• 类型：String
• 默认值：无

<template>
  <!-- 使用 for 循环展示长列表 -->
  <recycle-list for="(item, i) in dataList">
    <!-- 定义 cell-slot 模板 -->
    <cell-slot>
      <text>{{ i }}: {{ item.name }}</text>
    </cell-slot>
  </recycle-list>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const dataList = ref([
      { name: 'Item A' },
      { name: 'Item B' },
      { name: 'Item C' }
    ]);

    return { dataList };
  }
}
</script>

2.2 使用 switch 和 case 区分模板

• 说明：通过 switch 属性绑定用于区分模板类型的字段，使用 cell-slot 的 case 属性来定义不同的模板展示。
• 类型：String
• 默认值：无

<template>
  <!-- 使用 switch 和 case 展示不同类型的模板 -->
  <recycle-list for="(item, i) in dataList" switch="type">
    <cell-slot case="A">
      <text>- A Type: {{ item.name }} -</text>
    </cell-slot>
    <cell-slot case="B">
      <text>- B Type: {{ item.name }} -</text>
    </cell-slot>
  </recycle-list>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const dataList = ref([
      { type: 'A', name: 'Item A1' },
      { type: 'B', name: 'Item B1' },
      { type: 'A', name: 'Item A2' },
      { type: 'B', name: 'Item B2' }
    ]);

    return { dataList };
  }
}
</script>

2.3 默认模板

• 说明：通过 default 属性设置默认的模板。当数据没有匹配到任何 case 类型时，会使用 default 模板进行渲染。

<template>
  <!-- 使用 default 模板处理未匹配的情况 -->
  <recycle-list for="(item, i) in dataList" switch="type">
    <cell-slot case="A">
      <text>- A Type: {{ item.name }} -</text>
    </cell-slot>
    <cell-slot case="B">
      <text>- B Type: {{ item.name }} -</text>
    </cell-slot>
    <cell-slot default>
      <text>- Default Type: {{ item.name }} -</text>
    </cell-slot>
  </recycle-list>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const dataList = ref([
      { type: 'A', name: 'Item A1' },
      { type: 'C', name: 'Item C1' }, // 使用默认模板
      { type: 'B', name: 'Item B1' }
    ]);

    return { dataList };
  }
}
</script>

3. 使用 recyclable 属性

在 recycle-list 中使用的自定义组件需要在 <template> 标签上添加 recyclable 属性，才能参与列表项的回收机制。

3.1 可复用组件案例

<template recyclable>
  <view>
    <text>{{ content }}</text>
  </view>
</template>

<script>
export default {
  props: {
    content: String
  }
}
</script>

4. recycle-list 配置案例

以下是完整的 recycle-list 代码案例，包括使用 switch、case、default 以及自定义组件。

<template>
  <recycle-list for="(item, i) in dataList" switch="type">
    <!-- 使用 case 区分不同的模板 -->
    <cell-slot case="A">
      <text>- A Type: {{ item.name }} -</text>
    </cell-slot>
    <cell-slot case="B">
      <text>- B Type: {{ item.name }} -</text>
    </cell-slot>
    <!-- 默认模板 -->
    <cell-slot default>
      <text>- Default Type: {{ item.name }} -</text>
    </cell-slot>
  </recycle-list>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const dataList = ref([
      { type: 'A', name: 'Item A1' },
      { type: 'B', name: 'Item B1' },
      { type: 'C', name: 'Item C1' } // 使用默认模板
    ]);

    return { dataList };
  }
}
</script>