Famo.us如何使滚动视图从底部填充顶部（或从右到左）？(Famo.us how to make

假设我已经与方向1（垂直）一个滚动视图。 在填充滚动视图，该项目确实出现并从上到下排列。

我想知道是否有扭转这一顺序，即，使滚动视图从底部到顶部填充的方式。 使用的一个很好的例子是一个邮件列表。 你想的最后一条消息总是出现在列表的底部。 默认情况下，该消息将在顶部对齐，这是不方便。

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

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

Answer 1:

难道像你的建议，同时通过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 2:

以及famo.us文件说：“滚动型将铺陈顺序在指定方向renderables的集合”，所以它会订购您提供订单的表面。

我的建议是在表面添加到列表中，然后只需将其添加到滚动型反转。

Answer 3:

你所寻找的是不印字（）。 您可以查看下面的代码运行codefamo.us

var Engine = require('famous/core/Engine');
var Surface = require('famous/core/Surface');
var StateModifier = require('famous/modifiers/StateModifier');
var Transform = require('famous/core/Transform');
var Easing = require('famous/transitions/Easing');
var Scrollview = require('famous/views/Scrollview');

var mainContext = Engine.createContext();
var items = [];
var scroll = new Scrollview();
mainContext.add(scroll);
var counter=0;
scroll.sequenceFrom(items);

function addOne() {
    setTimeout(function() {
        var surface = new Surface({
            size: [100, 100],
            content: 'surf: '+counter++,
            properties: {
                textAlign: 'center',
                lineHeight: '20px'
            }
        });
        items.unshift(surface);

        if (counter<10) 
        addOne();
    },2000);
}
addOne();

文章来源: Famo.us how to make a scrollview be filled from bottom to top (or right to left)?