Question

另一个famo.us初学者问题......

我的问题与this question和johntraver的优秀答案（下文提供）有关。我已经开始玩这个了一下，当点击一个时，我无法弄清楚如何访问Scrollview中的其他曲面。

例如，我想重新调整表面2＆＃39; AND＆＃39; Surface 3＆＃39;当表面2＆＃39;点击。

我查看了指南，示例等，我对RenderNode感到困惑。我对其服务的目的并不完全清楚。

提前感谢您的帮助。

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 Transitionable      = require("famous/transitions/Transitionable");
var SnapTransition      = require("famous/transitions/SnapTransition");

Transitionable.registerMethod('snap', SnapTransition);

var snap = { method: 'snap', period: 600, dampingRatio: 0.6 }

var mainContext = Engine.createContext();

var scrollview = new Scrollview();

var surfaces = [];

scrollview.sequenceFrom(surfaces);

for (var i = 0; i < 20; i++) {

    var surface = new Surface({
    content: "Surface: " + (i + 1),
    size: [undefined, undefined],
    properties: {
        backgroundColor: "hsl(" + (i * 360 / 40) + ", 100%, 50%)",
        lineHeight: "200px",
        textAlign: "center"
    }
    });

    surface.open = false;

    surface.state = new Modifier();

    surface.trans = new Transitionable(200);

    surface.state.sizeFrom(function(){
    return [undefined, this.trans.get()];
    }.bind(surface));

    surface.node = new RenderNode();

    surface.node.add(surface.state).add(surface);

    surface.pipe(scrollview);

    surface.on('click',function(e){
    if (this.open) {
        this.trans.halt();
        this.trans.set(200,snap);
    } else {
        this.trans.halt();
        this.trans.set(400,snap);
    }
    this.open = !this.open;

    }.bind(surface));

    surfaces.push(surface.node);
}

mainContext.add(scrollview);

Answer 1

将RenderNode视为要添加到scrollview的项目的视图。在示例中，@ johntraver将对node和surface修饰符的引用存储到曲面上。这可能让你有点困惑。虽然没问题，但我们需要使用node (item)作为参考点。此外，渲染节点项purpose允许我们有一个节点分支，我们有多个项目。

我更改了示例，使其更容易访问存储在项目（视图）中的曲面。我现在调用surface集合views来帮助我们理解我们传递给scrollview进行渲染的内容。相反，RenderNode (node)将表面的引用保存为属性，因此我们以后可以访问表面。

<强> Here is a running example on jsBin.

构建我们的视图

注意：我将这些功能移出循环，以便于阅读。

  for (var i = 0; i < 20; i++) {

    var node = new RenderNode();

    node.surface = new Surface({
      content: "Surface: " + (i + 1),
      size: [undefined, undefined],
      properties: {
        backgroundColor: "hsl(" + (i * 360 / 40) + ", 100%, 50%)",
        lineHeight: "200px",
        textAlign: "center"
      }
    });

    node.surface.open = false;

    node.surface.state = new Modifier();

    node.surface.trans = new Transitionable(200);

    node.surface.state.sizeFrom(_surfaceSize.bind(node.surface));

    // Add the modifier and the surface to our view    
    node.add(node.surface.state).add(node.surface);

    node.surface.pipe(scrollview);

    node.surface.on('click', _resize.bind(node.surface, i, views));

    views.push(node);
  }

访问多个视图并调整大小

的功能

  function _resize(index, views, event){
    console.log(index, views, event);
    next = index+1 < views.length ? views[index+1].surface : views[0].surface;
    if (this.open) {
      this.trans.halt();
      this.trans.set(200, snap);
      next.trans.halt();
      next.trans.set(200, snap);
    } else {
      this.trans.halt();
      this.trans.set(400, snap);
      next.trans.halt();
      next.trans.set(400, snap);
    }
    this.open = !this.open;
    next.open = this.open;

  }

完整代码

  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 Transitionable      = require("famous/transitions/Transitionable");
  var SnapTransition      = require("famous/transitions/SnapTransition");

  Transitionable.registerMethod('snap', SnapTransition);

  var snap = { method: 'snap', period: 600, dampingRatio: 0.6 };

  var mainContext = Engine.createContext();

  var scrollview = new Scrollview();

  var views = [];

  scrollview.sequenceFrom(views);

  function _resize(index, views, event){
    console.log(index, views, event);
    next = index+1 < views.length ? views[index+1].surface : views[0].surface;
    if (this.open) {
      this.trans.halt();
      this.trans.set(200, snap);
      next.trans.halt();
      next.trans.set(200, snap);
    } else {
      this.trans.halt();
      this.trans.set(400, snap);
      next.trans.halt();
      next.trans.set(400, snap);
    }
    this.open = !this.open;
    next.open = this.open;

  }

  function _surfaceSize(){
    return [undefined, this.trans.get()];
  }

  for (var i = 0; i < 20; i++) {

    var node = new RenderNode();

    node.surface = new Surface({
      content: "Surface: " + (i + 1),
      size: [undefined, undefined],
      properties: {
        backgroundColor: "hsl(" + (i * 360 / 40) + ", 100%, 50%)",
        lineHeight: "200px",
        textAlign: "center"
      }
    });

    node.surface.open = false;

    node.surface.state = new Modifier();

    node.surface.trans = new Transitionable(200);

    node.surface.state.sizeFrom(_surfaceSize.bind(node.surface));

    node.add(node.surface.state).add(node.surface);

    node.surface.pipe(scrollview);

    node.surface.on('click', _resize.bind(node.surface, i, views));

    views.push(node);
  }

  mainContext.add(scrollview);

调整Scrollview中的多个曲面的大小

1 个答案:

构建我们的视图

访问多个视图并调整大小

完整代码