列表单元格组件

cell 组件是 App 端 nvue 专用的列表项组件，主要用于 list、recycler 和 waterfall 组件中。它的重要作用在于帮助原生引擎进行资源的高效管理和回收，从而提升长列表的渲染性能。

1. 什么是 cell 组件？

cell 组件是一个必须嵌套在 list、recycler 或 waterfall 组件中的基础组件，用于定义列表中的单个列表项。cell 支持添加任意类型的子组件作为内容，但应避免在 cell 内添加滚动容器。通过使用 cell，可以提升长列表渲染的性能，同时减少内存占用。

使用场景

• 列表项定义：用于定义列表中的单个条目或元素，作为 list、recycler 或 waterfall 组件的子组件。
• 高性能长列表展示：在处理大量数据时，通过 cell 的回收机制提升渲染性能。
• 自定义列表内容：在 cell 内嵌入各种组件，自由定义列表项的内容布局。

2. cell 组件的常用属性

cell 组件提供了一些用于控制列表项行为的属性，如是否保留滚动位置、插入和删除动画等。以下是常用属性的详细说明及使用示例：

属性名	类型	默认值	说明
keep-scroll-position	Boolean	false	控制插入单元格后是否保持最后一个滑动位置
insert-animation	String	none	插入 cell 时的动画效果，支持 none 和 default
delete-animation	String	none	删除 cell 时的动画效果，支持 none 和 default
recycle	Boolean	true	控制 cell 及其子视图在滚动时是否回收，建议保持为 true 以节省内存
render-reverse-position	Boolean	false	定义开始渲染的位置，需搭配 list 的 render-reverse 属性共同使用

2.1 控制 cell 的插入与删除动画

• 说明：通过 insert-animation 和 delete-animation 属性设置 cell 的插入与删除时的动画效果。
• 类型：String
• 默认值：none

<template>
  <list>
    <!-- 使用默认插入和删除动画 -->
    <cell 
      v-for="(item, index) in dataList" 
      :key="item.id"
      insert-animation="default" 
      delete-animation="default"
    >
      <text>{{ item.name }}</text>
    </cell>
  </list>
</template>

<script>
import { ref } from 'vue'

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

    return { dataList };
  }
}
</script>

2.2 保持滚动位置

• 说明：通过 keep-scroll-position 属性，控制当新 cell 插入时是否保持列表的滚动位置不变。
• 类型：Boolean
• 默认值：false

<template>
  <list>
    <!-- 设置保持滚动位置 -->
    <cell 
      v-for="(item, index) in dataList" 
      :key="item.id"
      :keep-scroll-position="true"
    >
      <text>{{ item.name }}</text>
    </cell>
  </list>
</template>

<script>
import { ref } from 'vue'

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

    return { dataList };
  }
}
</script>

2.3 控制 cell 的回收机制

• 说明：通过 recycle 属性控制 cell 及其子视图在滚动时是否被回收。建议保持为 true，以确保滚动时的内存占用较低。
• 类型：Boolean
• 默认值：true

<template>
  <list>
    <!-- 控制回收机制，默认回收 -->
    <cell 
      v-for="(item, index) in dataList" 
      :key="item.id"
      :recycle="true"
    >
      <text>{{ item.name }}</text>
    </cell>
  </list>
</template>

<script>
import { ref } from 'vue'

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

    return { dataList };
  }
}
</script>

3. cell` 配置案例

以下案例展示了如何在 list 中使用 cell 组件，结合插入动画、删除动画、回收机制和滚动位置控制等功能，完成列表项的高效渲染。

<template>
  <list>
    <!-- 列表项，包含插入和删除动画，支持回收 -->
    <cell 
      v-for="(item, index) in dataList" 
      :key="item.id"
      insert-animation="default"
      delete-animation="default"
      :keep-scroll-position="true"
      :recycle="true"
    >
      <text>{{ item.name }}</text>
    </cell>
  </list>
</template>

<script>
import { ref } from 'vue'

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

    return { dataList };
  }
}
</script>

<style>
/* 样式配置，控制 cell 布局 */
.text {
  font-size: 16px;
  padding: 10px;
}
</style>