如何在Famo.us中的表面之间滑动？ [英] How to Swipe between surfaces in Famo.us?

问题描述

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

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 how the swiping works on the iOS home screen?

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

推荐答案

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

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.

以下是修改后使用Scrollview进行分页的示例..

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

希望这会有所帮助！

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

这篇关于如何在Famo.us中的表面之间滑动？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！