Question

我正在从famo.us搜索Lightbox演示的代码示例。不幸的是，codepen中应用程序的有趣部分在着名的.lib.js的笔版本中得到了证实。

这不是我感兴趣的整个画廊，它只是一个可分解的视图，在一行中有多个元素，具体取决于它们的大小和屏幕大小。

有没有像这样开发视图/布局的经验？

提前致谢

Answer 1

我一直在使用Scrollview和GridLayout做一些工作。您可以根据contextSize和target / min单元格大小计算网格尺寸。

这是一个让你入门的例子。我实际上是在Scrollview中添加gridLayout作为唯一视图。我知道这可能对滚动视图有效渲染有效，因为scrollview将始终渲染整个网格，但我这样做是为了举例。我在gridLayout周围使用Modifier来确保始终计算视图的大小，并且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'); // edited
var Scrollview      = require('famous/views/Scrollview');
var GridLayout      = require('famous/views/GridLayout');

var context = Engine.createContext();

var scrollViews = [];

var scrollview = new Scrollview();
scrollview.sequenceFrom(scrollViews);

var gridCells = [];

var grid = new GridLayout();
grid.sequenceFrom(gridCells);

grid.mod = new Modifier();

var cellCount     = 24;
var cellMinWidth  = 200.0;

grid.mod.sizeFrom(function(){

  var size        = context.getSize();
  var cellsX      = Math.floor(size[0] / cellMinWidth);
  var cellsY      = Math.ceil(cellCount * 1.0  / cellsX);
  var cellHeight  = size[0] * 1.0 / cellsX;

  grid.setOptions({dimensions:[cellsX,cellsY]});

  return [undefined,cellsY*cellHeight];
});

grid.node = new RenderNode();
grid.node.add(grid.mod).add(grid);


for (var i = 0; i < cellCount; i++) {
  var surface = new Surface({
    size:[undefined,undefined],
    properties: {
      backgroundColor:'hsl('+(i*360/12)+',75%,50%)'
    }
  });

  gridCells.push(surface);
  surface.pipe(scrollview);

};

scrollViews.push(grid.node);

context.add(scrollview);

FWIW要真正最大化scrollview的效率，您需要有一个按顺序呈现的视图列表。由于我们只在scrollview中渲染一个视图，因此我们始终都在渲染所有内容。我想到了几种解决这个问题的方法，这个例子超出了范围。

您可以自己进行可见性检查，并根据滚动视图的位置渲染节点。
您可以为每一行创建gridLayout，然后使用列表操作技术管理每个网格中的单元格。

奖金：

如果您只想将GridLayout用于修饰符，我发现使用_modifiers属性非常有用（注意：仅在部署后可用！）。我能够使用这种技术创建一个可重新排列的布局。曲面全部浮动在gridlayout外部，并且仅基于gridlayouts修改器通过其draggable修改器定位。这是那个工作演示..

http://higherorderhuman.com/examples/rearrangeable.html

希望这有帮助！

像Lightbox示例的代码

1 个答案: