javascript - 如何处理具有数十个 View 的ScrollableView？

我在Titanium中有一个ScrollableView（仅针对Android），必须滚动数十个视图。每个视图都是关于一两段文字，也许还有一两张图片。

我担心CPU压力太大，无法从一开始就填充所有视图。因此，我的计划是一次只在ScrollableView中拥有3个视图。

这是我想出的解决方案。视图从1到10编号。粗体编号的视图是当前活动的视图。破折号是占位符。当用户查看第一个视图时：


  1 2 3-------


用户向右滚动。


  1 2 3-------


用户再次向右滚动，并删除了视图1。现在已将View 4添加到了ScrollableView中。


  -2 3 4-------


等等。

据我所知，我面临的障碍是，无法在现有视图之前插入视图（如向左滚动的情况）。

我应该如何实施呢？

最佳答案

我基于a Titanium module创建了this GitHub gist，它就是这样做的。

用法如下：

var VirtualScroller = require('ui/common/VirtualScroller');

var virtualScroller = VirtualScroller({
    itemCount: 10,
    start: 0,
    getView: function(i) {
        return Titanium.UI.createLabel({
            width: Titanium.UI.FILL,
            height: Titanium.UI.FILL,
            text: "This is item " + (i + 1)
        });
    },
    isInfinite: false
});

window.add(virtualScroller.view);

该模块通过控制具有三个视图的ScrollableView来工作（如原始要点）。它支持有限（上面的示例）和无限滚动。

我已经发布了详细信息on my blog，并且它在at BitBucket中可用。