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

该项目的不同之处在于它使用触发器，而我正在使用附加...我似乎无法获得连接？

我的示例在此处的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");
});

  Demo

关于javascript - 将iScroll与JQM和动态内容一起使用，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/20616078/