0

我正在寻找重新设计我的移动 Web 应用程序以使用 Famo.us。这一切都非常标准，滚动视图嵌入标准表面。如果有人可以帮助我弄清楚如何在包含 Scrollviews 的表面之间进行转换，我将不胜感激。

到目前为止，我有一系列基本的 Scrollviews 嵌套在表面中，并在单击时让它们按顺序转换。它基于 Famo.us 示例 Github 存储库中包含的 RenderController 示例。

var mainContext = Engine.createContext();
var renderController = new RenderController();
var surfaces = [];
var counter = 0;
var temp = [];

for (var i = 0; i < 10; i++) {
    var scrollview = new Scrollview();
    scrollview.sequenceFrom(temp);
    for (var i = 0, temp; i < 40; i++) {
        temp = new Surface({
             content: "Surface: " + (i + 1),
             size: [undefined, 200],
             properties: {
                 backgroundColor: "hsl(" + (i * 360 / 40) + ", 100%, 50%)",
                 lineHeight: "200px",
                 textAlign: "center"
             }
        });
    temp.pipe(scrollview);
    }
    surfaces.push(scrollview);
}

renderController.show(surfaces[0]);

Engine.on("click", function() {
    var next = (counter++ + 1) % surfaces.length;
    this.show(surfaces[next]);
}.bind(renderController));

mainContext.add(new Modifier({origin: [.5, .5]})).add(renderController);

这导致屏幕栏上不显示任何标题（此代码示例中不包含标题），如果我在每次迭代后直接将 temp 添加到表面对象，我将滚动视图的每个元素单独显示为单独的表面和可以在所有 40 之间转换。

4

2 回答 2

2

您一定没有看过 GitHub 帐户上发布的示例。这些示例是大多数对象的简单用途，不包括物理引擎。

https://github.com/Famous/examples/tree/master/src/examples

您尝试实现的选项卡视图可以使用 RenderController 类轻松创建。来自 RenderController 的 example.js..

* RenderController is a dynamic view that can show or hide
* different renerables with transitions.

您只需在控制器中定义所需的视图，然后 RenderController 一次显示一个视图，以及您想要的任何转换。

祝你好运！

于 2014-04-25T14:49:58.683 回答
0

这是我的实现。我需要它，因为我的 scrollView 只有 1 个我想平滑滚动的巨大表面。

this.scrollTo = function (delta, duration, callback) {
    if (delta == 0) {
        if (callback) callback();
        return;
    }

    for (var i = 0; i < Math.abs(delta) ; ++i) {
        (function (i) {
            setTimeout(function () {
                currentClass.scrollView.setPosition(Math.round(currentClass.scrollView.getPosition()) + Math.sign(delta));
            }, duration / Math.abs(delta) * i);
        })(i);
    }

    setTimeout(function () {
        if (callback) callback();
    }, duration);
};

currentClass.scrollView 是你的滚动视图

于 2015-01-16T15:26:19.833 回答