复用列表(resue list)在爱码哥中是不同于普通列表的另外一种列表,使用复用列表是为了优化性能,在大数据的情况下(上千个item)避免因内存占用过多而导致系统崩溃。这是因为在移动应用中view(视图)是很耗费系统资源的一个对象,过多的view(几千个,view所占内存大小取决于view的面积)可能会引起内存不足而崩溃,同时一次性加载这么多view也会花费很长的时间。
对此相应的解决方案是使用reuse list,reuse list的原理是只创建一屏幕显示的view对象,当view被滚动超出屏幕之后就会被用来复用,因此始终只会占用一屏幕view的内存, 有效地解决了内存不足而引起崩溃的问题, 同时因为实际创建的view个数较少,具有很快的加载速度。
使用复用列表需要设置reuse="true"
,同时content里只能有一个list,不能有多个list或其他控件
<content>
<list id="resuelist" reuse="true">
<item accessory="indicator">
<label></label>
<label style="color:gray"></label>
</item>
</list>
</content>
reuse list中的item和普通list中的item有很大不同,因为reuse list的item并不是实际内容,而是UI模版,reuse list的item内容都通过Javascript脚本动态创建。关于reuse list完整的示例如下:
<?xml version="1.0" encoding="utf-8"?>
<imag>
<script>
<![CDATA[
function initList() {
var listJson = {items:[]};
for (var i = 0; i < 1000; i++) {
var itemJson = {
template:0,
onclick:'alert("item' + i + '")',
widgets:{
title:{text:'标题' + i},
subtitle:{text: '副标题' + i}
}
}
listJson.items.push(itemJson);
}
$('resuelist').update(listJson);
}
$page.onload = function() {
initList();
}
]]>
</script>
<page>
<title>
<center>
<label>reuse list</label>
</center>
</title>
<content>
<list id="resuelist" reuse="true">
<item accessory="indicator">
<label reusekey="title"></label>
<label style="color:gray" reusekey="subtitle"></label>
</item>
</list>
</content>
</page>
</imag>