0

我有一个 JQM ListView，每页最多 25 个项目。

我正在重建页面删除“li”项目并添加新项目，但从按钮被点击到列表是重建的 UI 似乎没有响应。

要添加列表项，我会生成一个包含所有“li”项的 HTML 字符串，并将整个“html li´s”附加到列表中。

我不知道是否是动态生成列表视图的最佳方法，您能提供一些建议吗？

这是 Chrome 中的 CPU 配置文件： http: //cl.ly/2x1L303t3A432L290Y0j/o 抱歉，这张大图我不知道如何以更易读的格式导出。在 Chrome 中，数字太低，响应性很好，我不知道如何在这里找到问题：-S 你知道如何做这样的配置文件，但是在移动设备（iPhone 或 Android，不知道问题）？

下面是一些代码：

function generate_listview(data)
{
    var lv_html = '',
        group = data.group_by_dia,
        last_dia,
        init_item = (items_per_page * current_page) -items_per_page,
        get_item_func = (data.gym == 'Tots') ? get_new_item_with_gymn : get_new_item;

    if (current_page != num_pages) {
        final_item = (items_per_page * current_page);
    }else{
        var resto = Math.round(cache_activities.activitats.length%items_per_page);
        final_item = init_item + ((resto > 0) ? resto : items_per_page);
    }
    var acts = data.activitats.slice(init_item, final_item);

    $activitats_list.append('<li data-role="list-divider">Gimnasos: ' + data.gym + " - Dia: " + data.dia + " - Activitat: " + data.activitat + " >> Trobades: " + cache_activities.activitats.length + '</li>');
    if (group){
         $.each(acts, function(index, value) { 
            if(value.d != last_dia) {
                lv_html += '<li data-role="list-divider">' + value.d + '</li>';
            }
            lv_html += get_item_func(value,data.gym);
            last_dia = value.d;
        });
    }else{
        $.each(acts, function(index, value) { 
            lv_html += get_item_func(value);
        });  
    }

    $activitats_list.append(lv_html);
    $activitats_list.listview("refresh");
    $.mobile.hidePageLoadingMsg();
    $header_p2.text(header_text + ' ' + current_page + '/' + num_pages);
}
function get_new_item(value)
{
    var startItem   = '<li data-theme="c">',
        endItem     = '</li>',
        color_activitat = '<span class="ui-li-aside ui-li-desc" style="background-color: yellow; width:15px; color: yellow">.</span>';
    return startItem + 
        '<h3 class="ui-li-heading">' + value.a  + '</h3>' + 
        '<p class="ui-li-desc">' + 
            '<strong>Sala: </strong>' +  value.s + 
            ' <strong>Dia: </strong>' + value.d + ' (' +value.i + ' - ' + value.f + ')' + 
        '</p>' + endItem;
}
function get_new_item_with_gymn(value,gym_name)
{
    var startItem   = '<li data-theme="c">',
        endItem     = '</li>',
        gym_item    = '<strong>Gimn&agrave;s: </strong>' + value.g + ' ',
        new_line = '</p><p class="ui-li-desc">',
        color_activitat = '<span class="ui-li-aside ui-li-desc" style="background-color: yellow; width:15px; color: yellow">.</span>';
    return startItem + 
        '<h3 class="ui-li-heading">' + value.a  + '</h3>' + 
        '<p class="ui-li-desc">' + gym_item + 
        '<strong>Sala: </strong>' +  value.s + new_line + 
        ' <strong>Dia: </strong>' + value.d + ' (' +value.i + ' - ' + value.f + ')' + 
        '</p>' + endItem;
}
function go_next () {
    current_page += 1;
    if (current_page > num_pages) {
        current_page = num_pages;
    }else{
        $.mobile.showPageLoadingMsg();
        $activitats_list.find('li').remove().end();
        generate_listview(cache_activities);    
        $.mobile.silentScroll(0);
    }
    if (current_page == num_pages){
        $next_btn.button('disable');
        $next_btn_down.button('disable');
        $prev_btn.button('enable');
        $prev_btn_down.button('enable');
    }else{
        $prev_btn.button('enable');
        $prev_btn_down.button('enable');
    }
}
function go_previous () {
    current_page -= 1;
    if (current_page <= 0) {
        current_page = 1;
    }else{
        $.mobile.showPageLoadingMsg();
        $activitats_list.find('li').remove().end();
        generate_listview(cache_activities);    
        $.mobile.silentScroll(0);        
    }
    if (current_page == 1) {
        $prev_btn.button('disable');
        $prev_btn_down.button('disable');
        $next_btn.button('enable');
        $next_btn_down.button('enable');
    }else{
        $next_btn.button('enable');
        $next_btn_down.button('enable');
    }
}
4

0 回答 0