将iScroll与JQM和动态内容结合使用

我正在尝试使用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");
});

这个项目的不同之处在于它使用了触发器，而我使用的是append。。。我好像无法接通电话？

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

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");
});

演示

相关内容

最新更新

热门标签：