Question

如果页面是静态页面，

data-scroll="true"可以正常工作，但如果我使用javascript动态添加页面则不起作用。

我的标题部分是：

<link rel="stylesheet" href="css/jquery.mobile-1.0rc2.css" />
<link rel="stylesheet" href="css/jquery.mobile.scrollview.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.js"></script>
<script type="text/javascript" src="js/jquery.mobile-1.0rc2.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="js/jquery.mobile.scrollview.js"></script>
<script type="text/javascript" src="js/scrollview.js"></script>

我还添加了data-scroll属性并使用javascript将其设置为true，以下是我的代码：

var pageHtml = "<div data-role='page' data-scroll='true' id=page" + pageId + " data-url=page" + pageId + ">";
var pageHeader = "<div data-role='header' data-position='fixed'><h1>" + menuItem + "</h1></div>";
var pageContent = "<div data-role='content' id='page" + pageId + "Content'></div>";
var page = pageHtml + pageHeader + pageContent + "</div>";
$(page).appendTo($.mobile.pageContainer);

请帮帮我......

Answer 1

尝试这样的事情：

$('yourScrollersId').scrollview();

我有同样的问题，为我工作。

晚于永远好于： - ）

Answer 2

经过长时间的研究，我发现了 -

我们需要为每个滚动块加载动态HTML到唯一容器。

例如.-

<强> HTML

<div data-role="content" id="container">

    <div id="scrollContainer"></div>

    <div id="anotherContainer"></div>

</div>

<强> JS

如果我们首先在'scrollContainer'上加载了一个滚动视图，

$('#scrollContainer').html(loadHtml);
$("#scrollContainer").scrollview();
$("#scrollContainer").trigger('create');

然后下次，我们需要加载一个不同的容器 -

$('#anotherContainer').html(loadHtml);
$("#anotherContainer").scrollview();
$("#anotherContainer").trigger('create');

<强>可选

要再次动态加载到#scrollContainer，我们可以删除＆amp;重新创建<div>。执行第二个代码块后

$('#scrollContainer').remove();
$('#container').append('<div id="scrollContainer"></div>');
//$('#scrollContainer').empty();  // simply making this DIV empty WILL NOT WORK, we need to REMOVE DYNAMIC CLASSES, STYLES also. So, its better to recreate the LOADCONTAINER

应该有其他解决方案，但这个确实有效。

Answer 3

您需要JQM应用该页面 - 尝试

$(page).appendTo($.mobile.pageContainer).page();

甚至

$(page).appendTo($.mobile.pageContainer).trigger('create');

希望这有帮助

更新：这是关于如何正式执行此操作的JQM documentation

jQueryMobile'data-scroll = true'不适用于动态注入的页面

3 个答案: