Famo.us 滚动视图不滚动

Question

我正在尝试从包含多个表面（甚至内部视图）的视图中创建一个 Scrollview，但它不会滚动。它只是填充内容直到折叠并且不再向下滚动（不响应鼠标滚轮或触摸手势）。

视图类中创建滚动视图的函数：

function _createScrollView () {

    this.scrollView = new Scrollview();
    var surfaces = [];

    this.scrollView.sequenceFrom(surfaces);

    for (var i = 0, temp; i < 40; i++) {

        temp = new ContentRow({ orderNumber : i });

        temp.pipe(this.scrollView);
        surfaces.push(temp);
    }

    this.scrollViewMod = new StateModifier({
        transform : Transform.translate(0, 80, 0)
    });

    this.add(this.scrollViewMod).add(this.scrollView);
}

这是完整的 ContentRow 类，我期待进一步详细开发并成为更大滚动视图序列的一部分：

define(function(require, exports, module) {
var View          = require('famous/core/View');
var Surface       = require('famous/core/Surface');
var Transform     = require('famous/core/Transform');
var StateModifier = require('famous/modifiers/StateModifier');

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

    this.add(new Surface({
             content: "Surface: " + (this.options.orderNumber + 1),
             size: [undefined, 200],
             properties: {
                 backgroundColor: "hsl(" + (this.options.orderNumber * 360 / 40) + ", 100%, 50%)",
                 lineHeight: "200px",
                 textAlign: "center"
             }
        }))
}

ContentRow.prototype = Object.create(View.prototype);
ContentRow.prototype.constructor = ContentRow;

ContentRow.DEFAULT_OPTIONS = {
    orderNumber : 0        
};

module.exports = ContentRow; 
});

Answer 1

您需要将 ContentRow 中的表面通过管道传输到 ContentRows _eventOutput..

ContentRow 应该如下所示..

希望这会有所帮助！

define(function(require, exports, module) {

  var View          = require('famous/core/View');
  var Surface       = require('famous/core/Surface');
  var Transform     = require('famous/core/Transform');
  var StateModifier = require('famous/modifiers/StateModifier');

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

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

    surface.pipe(this._eventOutput);

    this.add(surface);
  }

  ContentRow.prototype = Object.create(View.prototype);
  ContentRow.prototype.constructor = ContentRow;

  ContentRow.DEFAULT_OPTIONS = {
    orderNumber : 0        
  };

  module.exports = ContentRow; 
});