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

Question

我使用以下代码:

科尔多瓦6.3.1jQuery 1.11.1jQuery UI 1.11.2jQuery Mobile 1.4.5iScroll 4.2jQuery 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);

这是我必须做的标准iscroroll/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是很好的库，但是如果你用错了，它是减慢你的应用程序的最好方法。我经常使用它们，但只是为了一些我自己不能写得更简单的东西。

我会扔掉isroll和jQueryMobile，重新开始你的列表。我有一个包含数百个条目的列表，它们滚动起来非常流畅。