如何在 Famo.us 中的表面之间滑动？答案

【问题标题】：How to Swipe between surfaces in Famo.us?如何在 Famo.us 中的表面之间滑动？
【发布时间】：2014-05-14 22:41:55
【问题描述】：

使用以下 Famo.us 示例代码添加 10 个垂直显示的表面，宽度和高度为 100%，我如何添加功能以在它们之间滑动，类似于在 iOS 主屏幕上滑动的工作方式？

define(function(require, exports, module) {
    var Engine           = require("famous/core/Engine");
    var Surface          = require("famous/core/Surface");
    var SequentialLayout = require("famous/views/SequentialLayout");

    var mainContext = Engine.createContext();

    var sequentialLayout = new SequentialLayout({
        direction: 0
    });
    var surfaces = [];

    sequentialLayout.sequenceFrom(surfaces);

    for (var i = 0; i < 10; i++) {
        surfaces.push(new Surface({
            content: "Surface: " + (i + 1),
            size: [window.innerWidth, window.innerHeight],
            properties: {
                backgroundColor: "hsl(" + (i * 360 / 10) + ", 100%, 50%)",
                lineHeight: window.innerHeight/10 + "px",
                textAlign: "center"
            }
        }));
    }

    mainContext.add(sequentialLayout);
});

【问题讨论】：

标签： javascript famo.us

【解决方案1】：

您可以使用启用分页的 Scrollview 类来实现 iOS 主屏幕的效果。这使您可以实际从一页拖动到另一页或滑动。我相信 EdgeSwapper 类只会处理滑动。

这是您的示例修改为使用带有分页的 Scrollview..

希望这会有所帮助！

var Engine           = require("famous/core/Engine");
var Surface          = require("famous/core/Surface");
var Scrollview       = require("famous/views/Scrollview");

var mainContext = Engine.createContext();

var scrollview = new Scrollview({
    direction: 0,
    paginated: true
});
var surfaces = [];

scrollview.sequenceFrom(surfaces);

for (var i = 0; i < 10; i++) {
    surface = new Surface({
        content: "Surface: " + (i + 1),
        size: [window.innerWidth, window.innerHeight],
        properties: {
            backgroundColor: "hsl(" + (i * 360 / 10) + ", 100%, 50%)",
            lineHeight: window.innerHeight/10 + "px",
            textAlign: "center"
        }
    });

    surface.pipe(scrollview);

    surfaces.push(surface);
}

mainContext.add(scrollview);

【讨论】：

谢谢！这正是我想要的。

【解决方案2】：

您是否研究过 EdgeSwapper？我认为这可能是您正在寻找的一个例子： https://github.com/Famous/examples/blob/master/src/examples/views/EdgeSwapper/example.js

【讨论】：