How to Swipe between surfaces in Famo.us?

Question

Using the following Famo.us example code that adds 10 surfaces displayed vertically with 100% width and height, how can I add functionality to swipe between them, similar to

Answer 1

Have you looked into the EdgeSwapper? I think it might be an example of what you're looking for: https://github.com/Famous/examples/blob/master/src/examples/views/EdgeSwapper/example.js

Answer 2

You can achieve the effect of an iOS homescreen using the Scrollview class with paging enabled. This allows you to actually drag from one page to another or swipe. I believe the EdgeSwapper class will only deal with the swipe.

Here is your example modified to use Scrollview with paging..

Hope this helps!

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);