3

我在ScrollView其中有 Surface 元素的序列。我希望能够在最新元素出现在数组中时立即滚动到它。

这是一个演示，我希望它可以像在任何聊天应用程序中一样滚动……旧的表面超出了场景，而新的表面将始终位于底部。问题和这里一样：Famo.us how to make a scrollview be filled from bottom to top (or right to left)?

http://jsfiddle.net/LA49a/

Famous.loaded(function () {
    var Engine = Famous.Core.Engine;
    var Surface = Famous.Core.Surface;
    var Scrollview = Famous.Views.Scrollview;
    var Timer = Famous.Utilities.Timer;

    var mainContext = Engine.createContext();

    var scrollview = new Scrollview();
    var surfaces = [];
    var i = 0;

    scrollview.sequenceFrom(surfaces);

    Timer.setInterval(function () {
        var temp = new Surface({
            content: "Surface: " + (i + 1),
            size: [undefined, 50],
            properties: {
                backgroundColor: "hsl(" + (i * 360 / 40) + ", 100%, 50%)",
                lineHeight: "50px",
                textAlign: "center"
            }
        });

        temp.pipe(scrollview);
        surfaces.push(temp);
        i++;
        // scrollview.goToNextPage();
    }, 400);

    mainContext.add(scrollview);
});
4

4 回答 4

1

我假设您要输入一个非常大的整数来让滚动视图移动到最后，这会显示您的“最新”元素。

如果您有相同宽度的表面（假设滚动视图的 X 方向），您可能会通过检查实际需要移动的像素数来获得更平滑的结果，以便将最后一个项目定位在滚动视图的右边缘。您拥有运行 sequenceFrom() 的原始数组。将其中的项目数乘以您的表面宽度并减去滚动视图宽度的像素（可以设置为“未定义”，在这种情况下您需要查看窗口的宽度）以调整以获取最新元素到滚动视图的右侧而不是左侧。

如果您的表面大小不同，您可能会在将它们添加到支持数组时更改一些内容以跟踪每个表面的 x 偏移量，只需向表面添加一个属性即可。然后你可以问表面它的偏移量是多少，然后减去滚动视图的宽度。

希望能帮助你更接近。

于 2014-05-19T17:04:18.377 回答
1

通过将对齐属性设置为 1，这在著名的 flex ScrollView 中得到了支持。

看这个演示： https ://github.com/IjzerenHein/ Famous-flex-chat

于 2014-11-08T19:57:13.967 回答
0

解决了，通过将 ScrollView 旋转 180˚ 并将其中的所有表面也旋转 180˚ http://jsfiddle.net/tamtamchik/LA49a/3/

Famous.loaded(function () {
    var Engine = Famous.Core.Engine;
    var Surface = Famous.Core.Surface;
    var Scrollview = Famous.Views.Scrollview;
    var Timer = Famous.Utilities.Timer;
    var Transform = Famous.Core.Transform;
    var StateModifier = Famous.Modifiers.StateModifier;
    var ContainerSurface = Famous.Surfaces.ContainerSurface;

    var mainContext = Engine.createContext();

    var scrollview = new Scrollview();
    var surfaces = [];
    var i = 0;
    var surfaceHeight = 50;

    scrollview.sequenceFrom(surfaces);

    Timer.setInterval(function () {
        var container = new ContainerSurface({
            size: [undefined, surfaceHeight]
        });

        var temp = new Surface({
            content: "Surface: " + (i + 1),
            size: [undefined, surfaceHeight],
            properties: {
                backgroundColor: "hsl(" + (i * 360 / 40) + ", 100%, 50%)",
                lineHeight: "50px",
                textAlign: "center"
            }
        });

        var surfaceRotate = new StateModifier({
            transform: Transform.rotateZ(Math.PI)
        });

        var surfacePush = new StateModifier({
            transform: Transform.translate(window.innerWidth, surfaceHeight)
        });

        container.add(surfacePush).add(surfaceRotate).add(temp);
        container.pipe(scrollview);
        temp.pipe(scrollview);
        surfaces.unshift(container);
        i++;
    }, 400);

    var rotate = new StateModifier({
        transform: Transform.rotateZ(Math.PI)
    });

    var push = new StateModifier({
        transform: Transform.translate(window.innerWidth, window.innerHeight)
    });

    mainContext.add(push).add(rotate).add(scrollview);
});
于 2014-06-27T07:18:14.443 回答
0

嗯，这很狡猾！如果您在这些节点中有很多文本内容，那么它的几个额外矩阵可能会变得非常慢......

通过使用一个巨大的数字，这只是为了迫使 famo.us 滚动到视图的末尾，我假设？

如果渲染发生了，您还可以：

pos = getPosition(nodeNum)  // for last elements scrollposition
setPosition(pos)

但是，如果插入发生在与您的运动控制相同的代码块中，则它尚未呈现。

这里提供了一个复杂的解决方法，使用事件在部署/渲染发生后触发大小计算： 我们如何在 famo.us 中获取表面的大小？

还有另一个技巧是从无与伦比的@johntraver 中制作著名的重新计算尺寸 如何让 famo.us 重新计算尺寸？

您是否还查看了 Engine.nextTick() 或 JQuery.deferred ？似乎在您插入内容后立即会有一个“未渲染”的瞬间，但在更新后您可以得到尺寸确定。

于 2014-06-28T09:21:20.127 回答