sencha touch list infinite 属性
2013-12-23 21:56
337 查看
sencha touch list
1 默认每一项的高度会自动适应其内容。
2 当每一个 item 的高度都相同且不变时, 设置 itemHeight 为固定值 和 variableHeights 为 false,
可以优化性能,因为不用去动态计算每一项的高度。
3 infinite 属性对底层做了优化,大体是 infinite 为 false 时,每一个 item 都对应一个 dom 元素,当 list 有很多项时肯定影响性能。 当 infinite 为 true 时,假设一屏能显示 10 条,底层只有 10 个 dom 元素, 当滚动时只循环这 10 个 dom,所以性能与 item 的个数没有关系。我测试了一下,当数据很多时,设置 infinite 为 ture 确实滚动流畅了很多。
一个老外说当数据较少时(比如 500 条以内),用不用 infinite 滚动都差不多, 当数据很多时 infinite 能起到优化作用。
至于底层实现到底有什么不同,有兴趣的同学可以去研究一下 sencha 的源码。
4 发现 list 设置了 infinite 为 ture 后, 内容很长时布局就乱掉了。 原来为了优化性能 variableHeights 被设置成了 false,每一项的高度都设置成了默认高度。把 variableHeights 设置成 true 就可以自适应了。
还有问题: 设置了infinite : true 后,客户报了一个 bug 说 在 IOS 中快速滑动界面会突然卡死。经我测试确实有这个 bug (当list item 有多行内容, 确切的说是每行高度超过 list item 的默认高度时), 而设置 infinite : false 就没有问题。
查了一下这是 sencha 2.2 的一个 bug, 经测试在 sencha 2.3 中修正了这个 bug.
老外也有讨论这个 bug ,更多请参考
1 默认每一项的高度会自动适应其内容。
2 当每一个 item 的高度都相同且不变时, 设置 itemHeight 为固定值 和 variableHeights 为 false,
可以优化性能,因为不用去动态计算每一项的高度。
3 infinite 属性对底层做了优化,大体是 infinite 为 false 时,每一个 item 都对应一个 dom 元素,当 list 有很多项时肯定影响性能。 当 infinite 为 true 时,假设一屏能显示 10 条,底层只有 10 个 dom 元素, 当滚动时只循环这 10 个 dom,所以性能与 item 的个数没有关系。我测试了一下,当数据很多时,设置 infinite 为 ture 确实滚动流畅了很多。
一个老外说当数据较少时(比如 500 条以内),用不用 infinite 滚动都差不多, 当数据很多时 infinite 能起到优化作用。
至于底层实现到底有什么不同,有兴趣的同学可以去研究一下 sencha 的源码。
4 发现 list 设置了 infinite 为 ture 后, 内容很长时布局就乱掉了。 原来为了优化性能 variableHeights 被设置成了 false,每一项的高度都设置成了默认高度。把 variableHeights 设置成 true 就可以自适应了。
还有问题: 设置了infinite : true 后,客户报了一个 bug 说 在 IOS 中快速滑动界面会突然卡死。经我测试确实有这个 bug (当list item 有多行内容, 确切的说是每行高度超过 list item 的默认高度时), 而设置 infinite : false 就没有问题。
查了一下这是 sencha 2.2 的一个 bug, 经测试在 sencha 2.3 中修正了这个 bug.
老外也有讨论这个 bug ,更多请参考
2.2.0 Infinite List Freezing
相关文章推荐
- sencha touch list 批量选择扩展(2013-7-29)
- Sencha Touch 2.1 Chart属性中文解释
- Sencha touch navigation 内嵌list,itemTap第二次点击不跳转的问题
- sencha touch 学习笔记- 基本组件1-list和panel(2013网页装在兜里)
- sencha touch list分页
- sencha touch list 选择插件,可记忆已选项,可分组全选
- sencha touch list 实现pull refresh那样的效果(拉动刷新)
- Sencha Touch 二 - Dataview里面实现items迭代并初始化items的一些属性
- sencha touch list 实现pull refresh那样的效果(拉动刷新)
- sencha touch SortableList 的使用
- sencha touch(7)——list组件
- sencha touch list更新单行数据
- sencha touch list 实现pull refresh那样的效果(拉动刷新)
- sencha touch List下拉出现重复数据
- Sencha Touch 2 DataView / List 分页
- Sencha touch 开发系列:容器组件:nestedList,navigationview
- sencha touch 响应在list的iteams中点击不同地方
- sencha touch 高性能 list最简单高效的实现方案
- sencha touch 2中list控件分组排序
- 如何在Sencha Touch List Item中添加一个Button