Question

我有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);
});

Answer 1

我假设您要投入一个非常大的圆形数字，以使滚动视图移动到最后，这会显示您最新的＆＃39;元件。

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

如果曲面尺寸不同，只需在曲面上添加属性，就可以在将每个曲面添加到背衬阵列时更改以跟踪每个曲面的x偏移量。然后你可以问表面它的偏移是什么，并减去滚动视图宽度的正确数量。

希望能帮助你靠近。

Answer 2

通过将alignment属性设置为1，在famous-flex ScrollView中支持此功能。

查看此演示： https://github.com/IjzerenHein/famous-flex-chat

Answer 3

通过将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);
});

Answer 4

嗯，那非常狡猾！如果你在那些节点中有很多文本内容，那么它可能会变得非常慢......

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

如果渲染已经发生，你也可以：

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

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

这里提供了一个复杂的解决方法，使用事件在部署/渲染发生后触发大小调整计算： how can we get the size of a surface within famo.us?

另一个技巧是从无与伦比的@johntraver中制作着名的重新计算尺寸 how to make famo.us recalculate sizes?

你是否也看过Engine.nextTick（）或者JQuery.deferred？在您插入内容后，似乎会立即显示＆＃34;未呈现＆＃34;即时，但更新后你可以得到大小确定。

Famo.us ScrollView在聊天中滚动

4 个答案: