javascript - 如何最好地在 famo.us 中创建单个可 ScrollView ？

Question

Famo.us 有一个“ ScrollView ”，但只有当您在其中有多个表面时它才会滚动。

我想要一页很长的文本，但这对滚动没有反应。鉴于 famo.us 故意覆盖正常的 native ScrollView (https://github.com/Famous/views/issues/45)，滚动长页内容的最佳方法是什么？

我正在考虑将所有内容 html 分开(例如逐个分区)，并将一堆表面添加到普通 ScrollView 中。这可能适用于一些简单的内容，但对于任何重要的内容都会很复杂 - JS 必须解析要显示的 html 的 DOM。

我还认为也许可以将 iFrame 设置为拥有自己的滚动条，但还没有让它发挥作用。这将意味着以某种方式覆盖当前隐藏所有剪裁的著名 CSS。然而，所有 touchmove 事件都被 famous 吞没的事实需要许多其他变通方法，或者 fork famous。

Answer 1

我假设您正在为动态长度的长格式内容使用真实大小的表面。这样做时，scrollview 无法理解 true 的大小，因此您无法滚动。我们可以改为将我们的表面包裹在 RenderNode 和 Modifier 中，并使用 Modifier 的 sizeFrom 函数将真实大小的表面包裹成以像素为单位的实际大小。这样 scrollview 就会知道您的内容有多长，并会相应地滚动。

这是例子!希望对您有所帮助!

var Engine = require('famous/core/Engine');
var Surface = require('famous/core/Surface');
var RenderNode = require('famous/core/RenderNode');
var Modifier = require('famous/core/Modifier');
var Scrollview  = require('famous/views/Scrollview');

var context = Engine.createContext();

var content = "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod \
                tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, \
                quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo \
                consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse \
                cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non \
                proident, sunt in culpa qui officia deserunt mollit anim id est laborum.";

var scrollview = new Scrollview();

var surfaces = [];
scrollview.sequenceFrom(surfaces);

surface = new Surface({
    size:[undefined,true],
    content: content,
    properties:{
        fontSize:'100px'
    }
})

surface.pipe(scrollview);

surface.node = new RenderNode();
surface.mod = new Modifier();

surface.mod.sizeFrom(function(){
    target = surface._currTarget;
    if (target){
        return [undefined,target.offsetHeight];
    } else {
        return [undefined,true];
    }
})

surface.node.add(surface.mod).add(surface);

surfaces.push(surface.node);

context.add(scrollview);