將iScroll與JQM和動態內容結合使用

Question

我正在嘗試使用jQuery將iScroll實現到我的HMTL5游戲中。 我似乎無法讓它工作？ 我在這里遵循了指南： http ： //www.gajotres.net/using-iscroll-with-jquery-mobile/

這是我想要做的：

$(document).on('pagebeforeshow', '#index', function(){ 
    $(".example-wrapper").html("");

    var html = '<ul data-role="listview">';
    for(i = 0; i < 30; i++) {
        html += '<li><a href="#">link '+i+'</a></li>';
    }
    html += '</ul>';
    $(".example-wrapper").append(html);
    $(".example-wrapper").iscrollview("refresh");
});

項目的不同之處在於它使用觸發器而我正在使用追加......我似乎無法獲得連接？

我的例子是在jsfiddle： http ： //jsfiddle.net/jmansa/952NJ/23/

Answer 1

iScroll動態生成包含可滾動元素的div，div具有類iscroll-content 。

<div class="example-wrapper" data-iscroll></div>

變

<div class="example-wrapper" data-iscroll>
  <div class="iscroll-content"></div>
</div>

所以當你使用$(".example-wrapper").html("")你刪除div的所有內容時，你應該使用$(".example-wrapper .iscroll-content").html("")清除以前的內容/元素。

此外，您需要將新元素附加到iscroll-content ，然后刷新 listview()和.iscrollview() 。

$(document).on('pagebeforeshow', '#index', function () {
    $(".example-wrapper .iscroll-content").html("");

    var html = '<ul data-role="listview">';
    for (i = 0; i < 30; i++) {
        html += '<li><a href="#">link ' + i + '</a></li>';
    }
    html += '</ul>';

    $(".example-wrapper .iscroll-content").append(html);
    $("[data-role=listview]").listview();
    $(".example-wrapper").iscrollview("refresh");
});

演示