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

【问题标题】：How can you transition between views containing Scrollviews in Famo.us?如何在 Famo.us 中包含 Scrollviews 的视图之间转换？
【发布时间】：2015-01-16 23:26:19
【问题描述】：

我希望重新设计我的移动网络应用程序以使用 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 之间过渡。

【问题讨论】：

如果您想重新提出这个问题（还需要两票），我建议您解释一下您为实现此目的所做的尝试、您得到的结果以及它们与期望的结果。请在 How to Ask 好问题和 Jon Skeet 的博客文章 Writing the perfect question 上阅读此建议。请特别注意“黄金法则”，但我强烈建议您阅读整篇文章。
我修改了我的帖子以澄清问题并强调迄今为止取得的进展。希望这就足够了。

标签： javascript html mobile famo.us

【解决方案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 一次显示一个视图，以及您想要的任何转换。

祝你好运！

【讨论】：

感谢或帮助，仍然掌握 Famo.us 的语法，来自经典的 JS、jQuery、Angular 背景。找到了回购并修改了我上面的帖子以反映当前的进度水平，因此它不被视为“垃圾邮件”。
我看到你在我的回答的帮助下编辑了这个问题。所以通过listview你的意思是Scrollview？目前尚不清楚您在寻找什么。你的例子工作了吗？
是的，抱歉，我的平台范式显然混淆了，所以这个想法是有多个选项卡，每个选项卡都包含一个滚动视图，其中的元素取自 JSON 对象。想想 tweetus 的例子。基本上构建几个滚动视图并将它们添加到表面对象并在单击选项卡时在每个“表面”之间进行转换。到目前为止，我设法使代码示例正常工作，但它将每个嵌套元素视为其自身的表面。生病将完整的代码示例放入 jsFiddle 并链接结果:)

【解决方案2】：

这是我的实现。我需要它，因为我的 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 是你的滚动视图

【讨论】：