Famo.us如何使滚动视图从下到上（或从右到左）填充？

Flavien Volken 发表于 Dev

Flavien Volken

假设我有一个方向为1（垂直）的滚动视图。在填充scrollView时，项目确实会出现并从上到下对齐。

我想知道是否有一种方法可以颠倒这种顺序，即使scrollView从底部到顶部填充。用法的一个很好的例子是消息列表。您希望最后一条消息始终显示在列表的底部。默认情况下，消息将在顶部对齐，这很不方便。

在此处输入图片说明

[编辑]我刚刚发现我们可以根据覆盖outputFrom函数回调的偏移量轻松设置自己的转换。例如，以下内容将反转滚动内容：

scrollview.outputFrom(function(offset)
{
       return  Transform.translate(0, -offset)
});

尤里·特卡琴科（Yuri Tkachenko）

是否按照您的建议进行了操作，将其全部旋转180 works仍然可以正常工作。示例：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);
});