Question

是否可以动态地将曲面添加到已填充的滚动视图中。单击时，我希望所有滚动视图元素向下移动并在顶部移动以再次添加新动画表面。

这是一个滚动视图正确的方法吗？

Answer 1

是的，您可以将新曲面动态添加到已填充的Scrollview中。只需在传递给Scrollview#sequenceFrom的Array中添加新曲面。

（编辑添加动画）

define(function(require, exports, module) {
  var Engine     = require("famous/core/Engine");
  var Surface    = require("famous/core/Surface");
  var Scrollview = require("famous/views/Scrollview");
  var Timer = require("famous/utilities/Timer");
  var Easing = require("famous/transitions/Easing");

  var RenderNode = require("famous/core/RenderNode");
  var Modifier = require("famous/core/Modifier");
  var Transitionable = require('famous/transitions/Transitionable');

  var mainContext = Engine.createContext();

  var scrollview = new Scrollview();
  var surfaces = [];

  scrollview.sequenceFrom(surfaces);

  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(temp);
  }

  // Add new surface after 1 second
  Timer.setTimeout(function(){
    var modifier = new Modifier({
      opacity: 0
    });
    var node = new RenderNode(modifier);
    var heightTarget = 200;
    var dynamicSurface = new Surface({
      content: "Dynamic Surface",
      size: [undefined, 0],
      properties: {
        lineHeight: "200px",
        textAlign: "center",
        backgroundColor: "#80e0c0"
      }
    });

    node.add(dynamicSurface);
    dynamicSurface.pipe(scrollview);
    surfaces.unshift(node);

    var opacity = new Transitionable(0);
    var sizeY = new Transitionable(0);

    // Performance implication - both of these functions execute on every tick.
    // They could be deleted after transition is complete if they were non-trivial
    // (allowing prototype function to resume)
    dynamicSurface.getSize = function() {
      var height = sizeY.get();
      return [undefined, height];
    };
    modifier.opacityFrom(function(){
      return opacity.get();
    });

    // Animate the height of the added surface, causing the rest of the list to move down
    sizeY.set(heightTarget, {duration: 500, curve: Easing.outCirc}, function(){
      // Need to set surface size manually after the transition, otherwise the div height is 0
      // (even though space was made for it)
      dynamicSurface.setSize([undefined, heightTarget]);
      // Fade in the item's content
      opacity.set(1, {duration: 500});
    });

  }, 1000);

  mainContext.add(scrollview);
});

此方法基于我在Taasky Famo.us演示中找到的方法：

它会将项目从屏幕上翻译出来，然后将其高度设置为0，以模拟缩小差距。上面的示例将高度设置为0到200，以模拟插入前的间隙。

Answer 2

看看Ijzerenhein的Famous Flex，它拥有您所需要的一切（包括精彩的教程和文档）：https://github.com/IjzerenHein/famous-flex

将表面添加到scrollview（带动画）

2 个答案: