iMAG中的复用列表的使用说明

复用列表（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>

iMAG中的复用列表的使用说明

猜你喜欢