长列表渲染（虚拟列表）

在典型的 Taro 应用中，正常的列表渲染遵循以下的逻辑：

  1. 生成或从远程加载数据
  2. 把数据加入框架的响应式数据中
  3. 框架使用 diff 算法或其它机制根据数据的不同尝试全量更新视图
  4. Taro 运行时捕获框架的更新请求更新视图

如果按照此逻辑，当第一步我们生成或加载的数据量非常大时就可能会产生严重的性能问题，导致视图无法响应操作一段时间。为了解决这个问题，我们可以采用另一种方式：比起全量渲染数据生成的视图，可以只渲染当前可视区域(visible viewport)的视图，非可视区域的视图在用户滚动到可视区域再渲染：

virtual-list

React/Nerv

使用 React/Nerv 我们可以直接从 @tarojs/components/virtual-list 引入虚拟列表（VirtualList）组件：

  1. import VirtualList from '@tarojs/components/virtual-list'

一个最简单的长列表组件会像这样，VirtualList 的 5 个属性都是必填项：

  1. function buildData (offset = 0) {
  2.   return Array(100).fill(0).map((_, i) => i + offset);
  3. }
  6. const Row = React.memo(({ id, index, style, data }) => {
  7.   return (
  8.     <View id={id} className={index % 2 ? 'ListItemOdd' : 'ListItemEven'} style={style}>
  9.       Row {index} : {data[index]}
  10.     </View>
  11.   );
  12. })
  15. export default class Index extends Component {
  16.   state = {
  17.     data: buildData(0),
  18.   }
  21.   render() {
  22.     const { data } = this.state
  23.     const dataLen = data.length
  24.     return (
  25.       <VirtualList
  26.         height={500} /* 列表的高度 */
  27.         width='100%' /* 列表的宽度 */
  28.         itemData={data} /* 渲染列表的数据 */
  29.         itemCount={dataLen} /*  渲染列表的长度 */
  30.         itemSize={100} /* 列表单项的高度  */
  31.       >
  32.         {Row} /* 列表单项组件，这里只能传入一个组件 */
  33.       </VirtualList>
  34.     );
  35.   }
  36. }

无限滚动

实现无限滚动也非常简单，我们只需要在列表滚动到底部时，往列表尾部追加数据即可：

  1. const Row = React.memo(({ id, index, style, data }) => {
  2.   return (
  3.     <View id={id} className={index % 2 ? 'ListItemOdd' : 'ListItemEven'} style={style}>
  4.       Row {index} : {data[index]}
  5.     </View>
  6.   );
  7. })
  12. function buildData (offset = 0) {
  13.   return Array(100).fill(0).map((_, i) => i + offset);
  14. }
  17. export default class Index extends Component {
  18.   state = {
  19.     data: buildData(0),
  20.   }
  23.   loading = false
  26.   listReachBottom() {
  27.     Taro.showLoading()
  28.     // 如果 loading 与视图相关，那它就应该放在 `this.state` 里
  29.     // 我们这里使用的是一个同步的 API 调用 loading，所以不需要
  30.     this.loading = true
  31.     setTimeout(() => {
  32.       const { data } = this.state
  33.       this.setState({
  34.         data: data.concat(buildData(data.length))
  35.       }, () => {
  36.         this.loading = false;
  37.         Taro.hideLoading()
  38.       })
  39.     }, 1000)
  40.   }
  43.   render() {
  44.     const { data } = this.state
  45.     const dataLen = data.length
  46.     const itemSize = 100
  47.     return (
  48.       <VirtualList
  49.         className='List'
  50.         height={500}
  51.         itemData={data}
  52.         itemCount={dataLen}
  53.         itemSize={itemSize}
  54.         width='100%'
  55.         onScroll={({ scrollDirection, scrollOffset }) => {
  56.           if (
  57.             // 避免重复加载数据
  58.             !this.loading &&
  59.             // 只有往前滚动我们才触发
  60.             scrollDirection === 'forward' &&
  61.             // 5 = (列表高度 / 单项列表高度)
  62.             // 100 = 滚动提前加载量，可根据样式情况调整
  63.             scrollOffset > ((dataLen - 5) * itemSize + 100)
  64.           ) {
  65.             this.listReachBottom()
  66.           }
  67.         }}
  68.       >
  69.         {Row}
  70.       </VirtualList>
  71.     );
  72.   }
  73. }

props

children: ReactComponent

将要渲染的列表单项组件。组件的 props 有 4 个属性：

  • style: 单项的样式，样式必须传入组件的 style 中
  • data: 组件渲染的数据，同虚拟列表 itemData
  • index: 组件渲染数据的索引
  • isScrolling: 组件是否正在滚动，当 useIsScrolling 值为 true 时返回布尔值，否则返回 undefined

推荐使用 React.memo 或 React.PureComponent 或使用 shouldComponentUpdate() 来优化此组件，避免不必要的渲染。

itemCount: number

列表的长度。必填。

itemData: Array<any>

渲染数据。必填。

itemSize: number

列表单项的大小，垂直滚动时为高度，水平滚动时为宽度。必填。

height: number | string

列表的高度。当滚动方向为垂直时必填。

width: number | string

列表的宽度。当滚动方向为水平时必填。

className: string

根组件 CSS 类

style: Style

根组件的样式

initialScrollOffset: number = 0

初始滚动偏移值，水平滚动影响 scrollLeft，垂直滚动影响 scrollTop。

innerElementType: ReactElement = View

列表内部容器组件类型，默认值为 View。此容器的 parentNode 是 ScrollView，childNodes 是列表。

innerRef: Ref | Function

列表内部容器组件的 ref。

layout: string = 'vertical'

滚动方向。vertical 为垂直滚动，horizontal 为平行滚动。默认为 vertical。

onScroll: Function

列表滚动时调用函数，函数的第一个参数为对象，由三个属性构成：

  • scrollDirection，滚动方向，可能值为 forward 往前， backward 往后。
  • scrollOffset，滚动距离
  • scrollUpdateWasRequested, 当滚动是由 scrollTo() 或 scrollToItem() 调用时返回 true，否则返回 false

onScrollNative: Function

调用平台原生的滚动监听函数。

overscanCount: number = 1

在可视区域之外渲染的列表单项数量，值设置得越高，快速滚动时出现白屏的概率就越小，相应地，每次滚动的性能会变得越差。

unlimitedSize?: boolean

解开高度列表单项大小限制，默认值使用: itemSize (请注意，初始高度与实际高度差异过大会导致隐患)。

position?: 'absolute' | 'relative'

布局方式，默认采用 “absolute”

renderBottom?: ReactNode

底部区域

useIsScrolling: boolean

是否注入 isScrolling 属性到 children 组件。这个参数一般用于实现滚动骨架屏（或其它 placeholder） 时比较有用。

其它 ScrollView 组件的参数

除了以上参数，所有 ScrollView 组件的参数都可以传入 VirtualList 组件，冲突时优先使用以上文档描述的参数。

方法

通过 React.createRef() 创建 ref，挂载到 VirtualList 上可以访问到 VirtualList 的内部方法：

  1. export default class Index extends Component {
  2.   state = {
  3.     data: buildData(0),
  4.   }
  7.   list = React.createRef()
  10.   componentDidMount() {
  11.     const list = this.list.current
  12.     list.scrollTo()
  13.     list.scrollToItem()
  14.   }
  17.   render() {
  18.     const { data } = this.state
  19.     const dataLen = data.length
  20.     return (
  21.       <VirtualList
  22.         height={500} /* 列表的高度 */
  23.         width='100%' /* 列表的宽度 */
  24.         itemData={data} /* 渲染列表数据 */
  25.         itemCount={dataLen} /*  渲染列表的长度 */
  26.         itemSize={100} /* 列表单项的高度  */
  27.         ref={this.list}
  28.       >
  29.         {Row} /* 列表单项组件，这里只能传入一个组件 */
  30.       </VirtualList>
  31.     );
  32.   }
  33. }

scrollTo(scrollOffset: number): void

滚动到指定的地点。

scrollToItem(index: number, align: string = "auto"): void

滚动到指定的条目。

第二参数 align 的值可能为：

  • auto: 尽可能滚动距离最小保证条目在可视区域中，如果已经在可视区域，就不滚动
  • smart: 条目如果已经在可视区域，就不滚动；如果有部分在可视区域，尽可能滚动距离最小保证条目在可视区域中；如果条目完全不在可视区域，那就滚动到条目在可视区域居中显示
  • center: 让条目在可视区域居中显示
  • end: 让条目在可视区域末尾显示
  • start: 让条目在可视区域末尾显示

Vue

在 Vue 中使用虚拟列表，我们需要在入口文件声明使用：

  1. // app.js 入口文件
  2. import Vue from 'vue'
  3. import VirtualList from '@tarojs/components/virtual-list'
  6. Vue.use(VirtualList)

一个最简单的长列表组件会像这样，virtual-list 的 5 个属性都是必填项：

  1. <! –– row.vue 单项组件 ––> 
  2. <template>
  3.   <view
  4.     :class="index % 2 ? 'ListItemOdd' : 'ListItemEven'"
  5.     :style="css"
  6.   >
  7.     Row {{ index }} : {{ data[index] }}
  8.   </view>
  9. </template>
  12. <script>
  13. export default {
  14.   props: ['index', 'data', 'css']
  15. }
  16. </script>
  19. <! –– page.vue 页面组件 ––> 
  20. <template>
  21.   <virtual-list
  22.     wclass="List"
  23.     :height="500"
  24.     :item-data="list"
  25.     :item-count="list.length"
  26.     :item-size="100"
  27.     :item="Row"
  28.     width="100%"
  29.   />
  30. </template>
  33. <script>
  34. import Row from './row.vue'
  37. function buildData (offset = 0) {
  38.   return Array(100).fill(0).map((_, i) => i + offset)
  39. }
  42. export default {
  43.   data() {
  44.     return {
  45.       Row,
  46.       list: buildData(0)
  47.     }
  48.   },
  49. }
  50. </script>

无限滚动

实现无限滚动也非常简单，我们只需要在列表滚动到底部时，往列表尾部追加数据即可：

  1. <template>
  2.   <virtual-list
  3.     wclass="List"
  4.     :height="500"
  5.     :item-data="list"
  6.     :item-count="dataLen"
  7.     :item-size="itemHeight"
  8.     :item="Row"
  9.     width="100%"
  10.     @scroll="onScroll"
  11.   />
  12. </template>
  15. <script>
  16. import Row from './row.vue'
  19. function buildData (offset = 0) {
  20.   return Array(100).fill(0).map((_, i) => i + offset)
  21. }
  24. export default {
  25.   data() {
  26.     return {
  27.       Row,
  28.       list: buildData(0),
  29.       loading: false,
  30.       itemHeight: 100
  31.     }
  32.   },
  33.   computed: {
  34.     dataLen () {
  35.       return this.list.length
  36.     }
  37.   },
  38.   methods: {
  39.     listReachBottom() {
  40.       Taro.showLoading()
  41.       this.loading = true
  42.       setTimeout(() => {
  43.         const { data } = this.state
  44.         this.setState({
  45.           data: data.concat(buildData(data.length))
  46.         }, () => {
  47.           this.loading = false;
  48.           Taro.hideLoading()
  49.         })
  50.       }, 1000)
  51.     },
  52.     onScroll({ scrollDirection, scrollOffset }) {
  53.       if (
  54.         // 避免重复加载数据
  55.         !this.loading &&
  56.         // 只有往前滚动我们才触发
  57.         scrollDirection === 'forward' &&
  58.         // 5 = (列表高度 / 单项列表高度)
  59.         // 100 = 滚动提前加载量，可根据样式情况调整
  60.         scrollOffset > ((this.dataLen - 5) * this.itemHeight + 100)
  61.       ) {
  62.         this.listReachBottom()
  63.       }
  64.     }
  65.   }
  66. }
  67. </script>

props

item: VueComponent

将要渲染的列表单项组件。组件的 props 有 4 个属性：

  • css: 单项的样式，样式必须传入组件的 style 中
  • data: 组件渲染的数据，同虚拟列表 itemData
  • index: 组件渲染数据的索引
  • isScrolling: 组件是否正在滚动，当 useIsScrolling 值为 true 时返回布尔值，否则返回 undefined

itemCount: number

列表的长度。必填。

itemData: Array<any>

渲染数据。必填。

itemSize: number

列表单项的大小，垂直滚动时为高度，水平滚动时为宽度。必填。

height: number | string

列表的高度。当滚动方向为垂直时必填。

width: number | string

列表的宽度。当滚动方向为水平时必填。

wclass: string

根组件 CSS 类

wstyle: Style

根组件的样式

initialScrollOffset: number = 0

初始滚动偏移值，水平滚动影响 scrollLeft，垂直滚动影响 scrollTop。

innerElementType: string = 'view'

列表内部容器组件类型，默认值为 view。此容器的 parentNode 是 scroll-view，childNodes 是列表。

layout: string = 'vertical'

滚动方向。vertical 为垂直滚动，horizontal 为平行滚动。默认为 vertical。

v-on:scroll: Function

列表滚动时调用函数，函数的第一个参数为对象，由三个属性构成：

  • scrollDirection，滚动方向，可能值为 forward 往前， backward 往后。
  • scrollOffset，滚动距离
  • scrollUpdateWasRequested, 当滚动是由 scrollTo() 或 scrollToItem() 调用时返回 true，否则返回 false

scrollNative: Function

调用平台原生的滚动监听函数。注意调用传递此函数时使用的是 v-bind 而不是 v-on：

  1. <virtual-list
  2.   wclass="List"
  3.   :height="500"
  4.   :item-data="list"
  5.   :item-count="list.length"
  6.   :item-size="100"
  7.   :item="Row"
  8.   width="100%"
  9.   @scroll="onScroll"
  10.   :scroll-native="onScrollNative"
  11. />

overscanCount: number = 1

在可视区域之外渲染的列表单项数量，值设置得越高，快速滚动时出现白屏的概率就越小，相应地，每次滚动的性能会变得越差。

useIsScrolling: boolean

是否注入 isScrolling 属性到 item 组件。这个参数一般用于实现滚动骨架屏（或其它 placeholder） 时比较有用。

相关问题

  • 百度小程序暂时不支持使用虚拟列表组件，详见 #7254
  • 虚拟列表组件需要实现一份 Vue3 版本（待实现），详见 Vue3 其它限制