jQuery 移动滚动在第一页显示上不起作用

Question

我正在使用以下内容：

科尔多瓦 6.3.1 jQuery 1.11.1 jQuery UI 1.11.2 jQuery 移动 1.4.5 iScroll 4.2 jQuery Mobile iScrollview v1.3.7

当我的 li 元素只包含锚元素时，一切正常。我得到一个滚动条，并且能够滚动到列表的底部。

当我的 li 元素包含 img 元素和锚元素的混合（并非每个锚都有与之关联的图像）时，我确实得到了一个滚动条，但我无法滚动到列表的底部 - 但仅限于第一次页面被展示。

如果我离开页面并返回，一切正常。

当我的 li 元素包含相同数量的 img 和锚元素时，起初我没有滚动条，滚动根本不起作用 - 但仅在第一次显示页面时。

如果我离开并返回，一切正常。

我怀疑它在计算 img 元素的大小时遇到​​问题，但不知道如何解决。

这是构建列表项并将它们附加到字符串的代码：

htmlToAppend = "<li>" +
           "<img id="+ i + " src=\""+imageUrl+"\" ></img><br>" +
           "<a id=" + i + " " + cssColor + ">" + caption + '<br><br><br><br><br></a>" +
       "</li>";

每个 htmlToAppend 字符串都连接到我附加的大字符串：

contentForDisplay.concat(htmlToAppend);

这是我必须做的标准 iscroll/iscrollview 工作：

$('#unorderedlist').append(contentForDisplay);    
$('#some_div').trigger('create');
$("#scrollable_list").iscrollview("refresh");

我怀疑问题是我的代码直到我第二次显示列表时才知道如何计算图像大小。

也许我都错了。

不管怎样，你有遇到过这样的事情吗？如果是这样，你做了什么来解决它？如果你是我，接下来你会尝试什么？

我看到有一个 iScroll5 - 它更容易使用吗？

还有其他的 cordova+jQuery 滚动解决方案吗？

Answer 1

当您编写 Cordova 应用程序时，最重要的是，您要编写正确的 html 和 css。正确的意思是，你有一个干净简单的 html 结构，而不是一个 div 沙漠。

例如：删除 br 标记并使用边距或填充。

jQuery 和 jQueryMobile 是很好的库，但是如果你用错了它们，这是降低应用程序速度的最好方法。我经常使用它们，但仅用于我自己无法编写更简单的东西。

我会扔掉 iScroll 和 jQueryMobile 并从您的列表重新开始。我有数百个条目的列表，它们滚动非常流畅。