如何最好地在 famo.us 中创建单个可滚动视图? [英] how best to create a single scrollable view in famo.us?

问题描述

Famo.us 有一个滚动视图"，但只有在其中有多个表面时才会滚动.

Famo.us has a "Scrollview" but it only scrolls if you have multiple surfaces inside it.

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

I would like a single long page of text, but this doesn't respond to scrolling. Given that famo.us deliberately overrides normal native scrolling views ( https://github.com/Famous/views/issues/45 ), what is the best method to get famous to scroll a long page of content?

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

I'm considering breaking all the content html apart (eg div by div), and adding a bunch of surfaces into a normal scrollview. this may work for some simple content but would be complex for anything non-trivial - JS would have to parse the DOM of the to-be-displayed html.

我还想也许 iFrame 可以设置为有自己的滚动条，但还没有让它工作.这意味着以某种方式覆盖当前隐藏所有剪辑的著名 CSS.然而，事实上所有 touchmove 事件都被名人吞并需要很多其他的解决方法，或者分叉名人.

I also thought maybe an iFrame could be setup to have its own scrollbar, but haven't got that to work yet. this would mean somehow overriding famous' CSS which is currently hiding all clipping. however the fact all touchmove events get swallowed by famous would require a lot of other workarounds, or forking famous.

推荐答案

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

I will assume you are using a true-sized surface for the dynamic length long form content. When doing so, scrollview can't understand a size of true, so you get no scrolling. We can instead wrap our surface in a RenderNode and Modifier and use the sizeFrom function of Modifier to wrap the true sized surface with an actual size in pixels. This way scrollview knows how long your content is and will scroll accordingly.

这是例子！希望能帮到你！

Here is the example! Hope it helps!

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

这篇关于如何最好地在 famo.us 中创建单个可滚动视图?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！