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

时间:2016-10-23 21:42:36

标签: cordova jquery-ui jquery-mobile iscroll4 iscrollview

我使用以下内容:

cordova 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元素时,起初我没有得到滚动条并且滚动根本不起作用 - 但只是第一次显示页面时。 / p>

如果我离开并回来,一切正常。

我怀疑它在计算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滚动解决方案吗?

1 个答案:

答案 0 :(得分:0)

当你写一个Cordova应用程序时,最重要的是,你写了正确的HTML和CSS。正确的方法是,你有一个干净简单的html结构而不是div沙漠。

例如:删除br标签并使用边距或填充。

jQuery和jQueryMobile是很好的库,但是如果你错误地使用它们,那么它是减慢你的应用程序速度的最好方法。我经常使用它们,但仅限于我自己不能写的东西。

我会抛出iScroll和jQueryMobile,然后再次列出你的列表。我有数百个条目的列表,它们滚动非常流畅。