Question

我希望重新设计我的移动网络应用程序以使用Famo.us.标准曲面中嵌入的滚动视图非常标准。如果有人能帮我弄清楚如何在包含Scrollviews的曲面之间进行转换，我真的很感激。

到目前为止，我有一系列嵌套在曲面中的基本Scrollviews，并在单击时按顺序转换。它基于Famo.us示例Github repo中包含的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之间过渡。

Answer 1

您一定不能看到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一次显示一个视图，并进行任何所需的转换。

祝你好运！

Answer 2

这是我的实施。我需要它，因为我的scrollView只有一个巨大的表面，我想顺利滚动。

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是你的scrollView

如何在Famo.us中的包含Scrollviews的视图之间进行转换？

2 个答案: