Famo.us 视图不能在滚动视图内的表面顶部包含图像表面

Question

define(function(require, exports, module){
var View            = require('src/core/View');
var Surface         = require('src/core/Surface');
var ImageSurface    = require('src/surfaces/ImageSurface');
var EventHandler    = require('src/core/EventHandler');
var StateModifier   = require('src/modifiers/StateModifier');
var RenderNode      = require('src/core/RenderNode');
var Transform       = require('src/core/Transform')

function DetailedList(){
    View.apply(this, arguments);

    _createStrips.call(this);
    _createImage.call(this);
}

DetailedList.prototype = Object.create(View.prototype);
DetailedList.prototype.constructor = DetailedList;
DetailedList.DEFAULT_OPTIONS = {
    height: 80,
    width: undefined,
    image: '',
    content: ''
} 

function _createStrips(){
    var backgroundSurface = new Surface({
        size: [this.options.width, this.options.height],
        properties: {
            backgroundColor: '#fff',
            padding: '10px 15px',
            borderBottom: '1px solid rgba(0,0,0,0.1)',
            marginBottom: '5px'
        },
        content: this.options.content
    });
    var bgMod = new StateModifier({
        transform: Transform.behind
    })
    backgroundSurface.pipe(this._eventOutput);

    var node = new RenderNode(bgMod);
    node.add(backgroundSurface);
    this.add(node);

}

function _createImage(){
    var previewImage = new ImageSurface({
        size: [50, 50],
        content: this.options.image
    });

    var previewMod = new StateModifier({
        origin: [0.5, 0.5],
        align : [0, 0.5]
    });

    previewImage.pipe(this._eventOutput);

    var node = new RenderNode(previewMod);
    node.add(previewImage);
    this.add(node);
}


module.exports = DetailedList;});

这会返回一个带有背景表面和顶部图像的视图。我将其用作列表中的一个项目。如果没有图像表面，它会很好地滚动。但是当我添加图像时，只出现第一项。此外，图像在视图之外。

Answer 1

问题说明：

DetailedListView 的大小没有限制，并根据Scrollview 的上下文调整大小。将rootNode 添加到视图并设置其大小会将项目限制为该节点的大小。

define('DetailedList', function(require, exports, module) {
  var View = require('famous/core/View');
  var Surface = require('famous/core/Surface');
  var ImageSurface = require('famous/surfaces/ImageSurface');
  var EventHandler = require('famous/core/EventHandler');
  var StateModifier = require('famous/modifiers/StateModifier');
  var Modifier = require('famous/core/Modifier');
  var RenderNode = require('famous/core/RenderNode');
  var Transform = require('famous/core/Transform');

  function DetailedList() {
    View.apply(this, arguments);

    this.rootNode = this.add(new Modifier({
      size: [this.options.width, this.options.height]
    }));

    _createStrips.call(this);
    _createImage.call(this);
  }

  DetailedList.prototype = Object.create(View.prototype);
  DetailedList.prototype.constructor = DetailedList;
  DetailedList.DEFAULT_OPTIONS = {
    height: 80,
    width: undefined,
    image: '',
    content: ''
  };

  function _createStrips() {
    var backgroundSurface = new Surface({
      size: [this.options.width, this.options.height - 1],
      properties: {
        backgroundColor: '#fff',
        padding: '10px 65px',
        borderBottom: '1px solid rgba(0,0,0,0.1)'
      },
      content: this.options.content
    });
    var bgMod = new StateModifier({
      transform: Transform.behind
    });
    backgroundSurface.pipe(this._eventOutput);

    var node = new RenderNode(bgMod);
    node.add(backgroundSurface);
    this.rootNode.add(node);

  }

  function _createImage() {
    var previewImage = new ImageSurface({
      size: [50, 50],
      content: this.options.image
    });

    var previewMod = new StateModifier({
      origin: [0, 0.5],
      align: [0, 0.5]
    });

    previewImage.pipe(this._eventOutput);

    var node = new RenderNode(previewMod);
    node.add(previewImage);
    this.rootNode.add(node);
  }


  module.exports = DetailedList;
});

注意：

在子节点上使用时需要考虑使用填充和边距。边距区域不会触发事件，因此最好重新考虑使用边距。

示例代码段：

define('main', function(require, exports, module) {
  var Engine = require('famous/core/Engine');
  var OptionsManager = require('famous/core/OptionsManager');
  var Surface = require('famous/core/Surface');
  var Modifier = require('famous/core/Modifier');
  var RenderNode = require('famous/core/RenderNode');
  var Transform = require('famous/core/Transform');
  var ScrollView = require('famous/views/Scrollview');

  var DetailedList = require('DetailedList');

  var mainContext = Engine.createContext();
  mainContext.setPerspective(1000);

  var dl = new DetailedList({
    height: 75,
    content: 'Famo.us Application',
    image: 'http://code.famo.us/assets/famous_logo.svg'
  });

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

  var counter = 0;

  _getView = function(i) {
    var cview = new DetailedList({
      height: 75,
      content: 'Custom View - ' + i,
      image: 'http://code.famo.us/assets/famous_logo.svg'
    });

    cview.pipe(scrollview);

    return cview;
  };

  for (var i = 0; i < 20; i++) {
    var view = _getView(i);
    surfaces.push(view);
  }

  scrollview.sequenceFrom(surfaces);

  mainContext.add(new Modifier({
    align: [0, 0],
    origin: [0, 0]
  })).add(scrollview);

});

require(['main']);

define('DetailedList', function(require, exports, module) {
  var View = require('famous/core/View');
  var Surface = require('famous/core/Surface');
  var ImageSurface = require('famous/surfaces/ImageSurface');
  var EventHandler = require('famous/core/EventHandler');
  var StateModifier = require('famous/modifiers/StateModifier');
  var Modifier = require('famous/core/Modifier');
  var RenderNode = require('famous/core/RenderNode');
  var Transform = require('famous/core/Transform');

  function DetailedList() {
    View.apply(this, arguments);

    this.rootNode = this.add(new Modifier({
      size: [this.options.width, this.options.height]
    }));

    _createStrips.call(this);
    _createImage.call(this);
  }

  DetailedList.prototype = Object.create(View.prototype);
  DetailedList.prototype.constructor = DetailedList;
  DetailedList.DEFAULT_OPTIONS = {
    height: 80,
    width: undefined,
    image: '',
    content: ''
  };

  function _createStrips() {
    var backgroundSurface = new Surface({
      size: [this.options.width, this.options.height - 1],
      properties: {
        backgroundColor: '#fff',
        padding: '10px 65px',
        borderBottom: '1px solid rgba(0,0,0,0.1)'
      },
      content: this.options.content
    });
    var bgMod = new StateModifier({
      transform: Transform.behind
    });
    backgroundSurface.pipe(this._eventOutput);

    var node = new RenderNode(bgMod);
    node.add(backgroundSurface);
    this.rootNode.add(node);

  }

  function _createImage() {
    var previewImage = new ImageSurface({
      size: [50, 50],
      content: this.options.image
    });

    var previewMod = new StateModifier({
      origin: [0, 0.5],
      align: [0, 0.5]
    });

    previewImage.pipe(this._eventOutput);

    var node = new RenderNode(previewMod);
    node.add(previewImage);
    this.rootNode.add(node);
  }


  module.exports = DetailedList;
});

<script src="http://requirejs.org/docs/release/2.1.16/minified/require.js"></script>
<script src="http://code.famo.us/lib/requestAnimationFrame.js"></script>
<script src="http://code.famo.us/lib/classList.js"></script>
<script src="http://code.famo.us/lib/functionPrototypeBind.js"></script>

<link rel="stylesheet" type="text/css" href="http://code.famo.us/famous/0.3.5/famous.css" />
<script src="http://code.famo.us/famous/0.3.5/famous.min.js"></script>