jQuery移动滚动不适用于首页显示

Question

我正在使用以下内容：

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

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

当我的li元素包含img元素和锚元素的混合（不是每个锚都有与其关联的图像）时，我确实会获得一个滚动条，但无法滚动到列表的底部-仅在第一次显示该页面时。

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

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

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

我怀疑它在计算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-tag，并使用边距或填充。

jQuery和jQueryMobile是很好的库，但是如果错误使用它们，则是降低应用速度的最佳方法。 我经常使用它们，但仅用于某些事情，我自己不能写得更简单。

我会扔掉iScroll和jQueryMobile，然后从列表开始。 我有包含数百个条目的列表，并且滚动非常流畅。