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 ,更多请参考
2.2.0 Infinite List Freezing