将 iScroll 与 JQM 和动态内容一起使用 [英] Using iScroll with JQM and dynamic content
问题描述
我正在尝试使用 jQuery 在我的 HMTL5 游戏中实现 iScroll.我似乎无法让它工作?我遵循了这里的指南:http://www.gajotres.net/using-iscroll-with-jquery-mobile/
这是我想要做的:
$(document).on('pagebeforeshow', '#index', function(){$(".example-wrapper").html("");var html = '';for(i = 0; i <30; i++) {html += '<li><a href="#">link '+i+'</a></li>';}html += '</ul>';$(".example-wrapper").append(html);$(".example-wrapper").iscrollview("刷新");});
项目的区别在于它使用触发器,而我使用的是附加......我似乎无法获得连接?
我的例子在 jsfiddle 上:http://jsfiddle.net/jmansa/952NJ/23/
iScroll 动态生成一个包含可滚动元素的 div,该 div 的类为 iscroll-content
.
成为
<div class="iscroll-content"></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 = '';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("刷新");});
<块引用>
I am trying to implement iScroll into my HMTL5 game using jQuery. I can't seem to get it to work? I have followed the guide here: http://www.gajotres.net/using-iscroll-with-jquery-mobile/
Here is what I am trying to do:
$(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");
});
The difference in the project is that it uses trigger and I am using append... I can't seem t get the connection?
My example is on jsfiddle here: http://jsfiddle.net/jmansa/952NJ/23/
iScroll dynamically generates a div which contains scrollable elements, that div has class iscroll-content
.
<div class="example-wrapper" data-iscroll></div>
Becomes
<div class="example-wrapper" data-iscroll>
<div class="iscroll-content"></div>
</div>
So when you use $(".example-wrapper").html("")
you remove all contents of the div, instead, you should use $(".example-wrapper .iscroll-content").html("")
to clear previous contents/elements.
Also, you need to append new elements to iscroll-content
, and then refresh both, listview()
and .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");
});
这篇关于将 iScroll 与 JQM 和动态内容一起使用的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!