Question

我有一个单页jQuery移动应用程序，它由几个列表视图组成，我动态填充。每当我第一次访问页面时，它们都被正确加载并且所有格式都看起来很棒，但是如果我导航到另一个页面然后返回到该页面，则页面将向所有内容“推”向上约50％。

当我点击类似

之类的链接时，才会出现此问题

<a href="#mypagewithlist">something</a>

而不是按后退按钮（不应该导致page（）调用）。

以下是一些页面的示例：

<div data-role="page" id="pagewithlist">
    <div data-role="content">
        <ul data-role="listview" id="mylistview"> </ul>
        <!-- I use jQuery Templates to populate the above list -->
    </div>
</div>
<div data-role="page" id="pagewithlink">
    <div data-role="content">
        <a data-role="button" href="#pagewithlist">Go to page with list</a>
    </div>
</div>

在第一次加载页面时，我从API中提取数据，然后使用该数据用jQuery模板填充空列表。

有关如何解决此问题的任何想法？

Answer 1

您原始网页的数据网址是什么（您使用该链接返回的网址）？您是否尝试为该页面（div）分配ID并将链接更改为<a href="#mypagewithlist">something</a>？如果链接和页面的data-url不匹配，jQM会再次获取原始页面，然后在DOM中加载两次，这可能会导致问题。

Answer 2

您是否在返回页面时尝试更新列表？即：

$('ul').listview('refresh');

在jQuery Mobile中更改页面会导致奇怪的格式问题

2 个答案: