Famous:在Scrollview中滑动项目

Question

我希望实现类似于Mailbox(http://www.mailboxapp.com/)的功能,您可以使用Famous(http://famo.us)在列表中滑动单个项目以对其进行操作.

我尝试将"可拖动"修改器添加到每个列表项,但似乎您无法将修改器添加到属于Scrollview的曲面.

任何人(来自Famous或其他人)都知道如何做到这一点？

Answer 1

弄清楚了.为了修改滚动视图内的曲面,需要将它们包装在RenderNode中.

var Engine     = require("famous/core/Engine");
var Surface    = require("famous/core/Surface");
var Scrollview = require("famous/views/Scrollview");
var RenderNode = require('famous/core/RenderNode');
var Transform = require('famous/core/Transform');
var Draggable = require('famous/modifiers/Draggable');

var mainContext = Engine.createContext();

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

scrollview.sequenceFrom(surfaces);

for (var i = 0, temp; i < 40; i++) {

    draggable = new Draggable( {
        xRange: [-220, 220],
        yRange: [0, 0],
    });

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

    node = new RenderNode(draggable)
    node.add(item);

    item.pipe(draggable);
    item.pipe(scrollview);
    surfaces.push(node);

}

mainContext.add(scrollview);

via @(markmarijnissen)Famo.us Scrollview height)