2

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

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

4

2 回答 2

4

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

基于滚动视图示例的示例：

（编辑添加动画）

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 以模拟插入前的间隙。

于 2014-05-08T14:55:41.390 回答
1

看看 Ijzerenhein 的 Famous Flex，它有你需要的一切（包括很棒的教程和文档）：https ://github.com/IjzerenHein/ Famous-flex

于 2014-12-16T10:48:03.927 回答