提交 b05ef90f 编写于 作者: shutao-dc's avatar shutao-dc

update list-view.md

上级 6e5f8666
...@@ -33,8 +33,30 @@ list-view和scroll-view都是滚动组件,list适用于长列表场景,其 ...@@ -33,8 +33,30 @@ list-view和scroll-view都是滚动组件,list适用于长列表场景,其
### list-item复用机制 ### list-item复用机制
type属性定义list-item组件类型。不赋值type属性默认值为0,每一个type类型都会有对应的list-item组件缓存池,当部分list-item组件存在子元素个数差异或排版差异时。请尽可能的配置不同的type,这样可以很好的规避部分场景下list-item组件复用时子元素创建或删除造成的性能影响,当list-view组件滚动触发加载list-item组件时,会优先查询对应type缓存池是否存在可复用的list-item组件。有则复用没有则创建新的list-item组件。 + type属性定义list-item组件类型。不赋值type属性默认值为0,每一个type类型都会有对应的list-item组件缓存池。
当list-item组件被滚动出屏幕则会优先添加到对应类型的list-item缓存池,每个类型缓存最大5个(不同平台缓存最大值不固定),如果缓存池已满则进行组件销毁!减少不必要的内存占用。 + list-view组件加载list-item组件时,会优先查询对应type缓存池是否存在可复用的list-item组件。有则复用没有则创建新的list-item组件。
+ list-item组件被滑动出屏幕则会优先添加到对应类型的list-item缓存池,每个类型缓存最大5个(不同平台缓存最大值不固定),如果缓存池已满则进行组件销毁!
+ 部分list-item组件存在子元素个数差异或排版差异时。请尽可能的配置不同的type,这样可以规避获取相同type类型的list-item组件后。由于子元素差异导致list-item无法正常复用问题。具体可参考示例:
```html
<template>
<view class="content">
<list-view ref="listView" class="list" :scroll-y="true">
<list-item v-for="(item,index) in list" :key="index" class="content-item1" type=1>
<text class="text">title-{{item}}</text>
<text class="text">content-{{item}}</text>
</list-item>
<list-item v-for="(item,index) in list" :key="index" class="content-item2" type=2>
<image class="image" src ="/static/test-image/logo.png"></image>
</list-item>
<list-item type=3>
<text class="loading">{{text}}</text>
</list-item>
</list-view>
</view>
</template>
```
示例中有三种类型的list-item组件。如果都不赋值type,list-item组件滑动出屏幕后都归类到type=0的缓存池。当触发list-item组件重新加载时,获取type=0的缓存池的组件,获取到的list-item组件可能是两个text子组件也可能是一个image子组件或一个text子组件,底层复用判断时则认为该情况异常不复用,重新创建新的list-item组件!复用失败未能优化性能。正确的方式则是不同的类型设置不同的type。加载时则会获取对应type类型缓存池中的list-item组件实现复用。
<!-- UTSCOMJSON.list-item.event --> <!-- UTSCOMJSON.list-item.event -->
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册