在phonegap应用程序中滚动时更新dom

时间:2013-07-11 12:19:08

标签: ios dom cordova scroll

在几乎完成的手机差距应用程序中,我在滚动时动态地将元素插入到dom中。为此,我使用'touchmove'和'scroll'回调。我目前面临的问题是,滚动完成后dom只会更新。在做了一些研究之后,我现在认为原因是在滚动完成后,phonegap不会更新dom。

你们有没有遇到过这个问题,并为此找到了解决方案?

更新

我的测试结果是滚动时javascript根本没有更新。我想知道为什么会这样,以及在滚动时执行javascript和更新dom的好方法。如果您可以想到在视口靠近它们时更新元素的另一种方法,那也没关系。目前,当用户停止滚动时,所有内容都会更新,但如果用户没有滚动,则会遇到“空”页面空间。

请求滚动检测代码

这是我目前用来检测滚动的内容。

document.addEventListener("touchmove", callback, false); // This works on android, but on iOS the callback is called when scrolling stops. Usually multiple times, because they stack while scrolling and not being executed. I see the event being executed during touchmove, but when the viewport begins moving, the callbacks pause until after the scrolling ends.
document.addEventListener("scroll", callback, false); // This is only executed once, and only when scrolling has fully stopped; the viewport is not moving anymore. On android this is executed all the time during scrolling, which is good.

仅在touchmove期间更新和滚动停止时的另一次更新组合就足够了。用户滚动如此之快(触摸移动后)他遇到空白空间的可能性非常小。问题是在滚动期间不执行touchmove事件回调。

1 个答案:

答案 0 :(得分:2)

我建议您查看iScroll,它可以让您对用户滚动进行大量控制。

它可以在用户滚动到某个点时进行注册,然后您可以执行一个函数来加载更多DOM元素,然后立即刷新滚动以继续使用更新后的元素进行用户体验。