Question

我有一个scrollview我正在插入div。

然而，这些div的内容是由javascript模板引擎呈现的。

当famo.us最初创建此页面时，似乎它将div内容的高度计算为零，因此scrollview中的div最终都会彼此重叠。我猜这是因为模板渲染后来发生了几次滴答..

有没有办法强制famo.us重新计算/重排其布局？

Answer 1

我也欠johntraver啤酒，因为他在这里有关于famo.us问题的优秀答案。这是他之前的一个答案得出的作品，我将它用于具有动态html内容（和高度）的scrollviews上的表面：

/* AutoSurface.js */

define(function(require, exports, module) {
    var Surface = require('famous/core/Surface');
    var Entity = require('famous/core/Entity');

    function AutoSurface(options) {
        Surface.apply(this, arguments);
        this.hasTrueSize = false;
        this._superCommit = Surface.prototype.commit;
    }

    AutoSurface.prototype = Object.create(Surface.prototype);

    AutoSurface.prototype.constructor = AutoSurface;

    AutoSurface.prototype.commit = function commit(context) {
        this._superCommit(context);
        if (!this.hasTrueSize) {
            this.trueHeight = Entity.get(this.id)._currTarget.clientHeight;
            this.setSize([undefined,this.trueHeight]);
            this.hasTrueSize = true;
        }
    }

    module.exports = AutoSurface;
});

每次打勾都会调用提交，因此您应该可以等到高度为＆gt; 0或您在设置hasTrueSize = true之前需要的内容。

Answer 2

这与我刚刚发布的答案非常相似。

how best to create a single scrollable view in famo.us?

您可以将尺寸较大的曲面包装在尺寸修改器中。这允许scrollview知道其内表面的实际高度，从而适当地滚动。我在Modifiers sizeFrom方法中使用了Surface的_currTarget。三元操作是为了防止表面预先部署错误。

以下是在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);

for (var i = 0; i < 10; i++) {
    var surface = new Surface({
        size:[undefined,true],
        content: content,
        properties:{
            fontSize:'24px',
            backgroundColor:'hsl('+(i*360/20)+',100%,50%)'
        }
    })

    surface.pipe(scrollview);

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

    surface.mod.sizeFrom(function(){
        target = this._currTarget;
        return target ? [undefined,target.offsetHeight] : [undefined,true];
    }.bind(surface));

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

    surfaces.push(surface.node);
};

context.add(scrollview);

Answer 3

而不是使用deploy - 修饰符攻击sizeFrom，而不是更容易破解：

让一个曲面返回它的实际计算高度而不是它指定的高度。

使用以下方法覆盖默认的getSize函数：

surface.getSize = function() { return this._size || this.size }

JSFiddle

中的完整示例

警告：这会破坏使用修改器在渲染树上方设置尺寸。（但是既然你明确地设定了大小，这应该不是问题）

如何让famo.us重新计算尺寸？

3 个答案: