Famo.us ScrollView 不滚动

Question

我试图用包含多个表面(甚至内部 View )的 View 制作一个 ScrollView ，但它不会滚动。它只是填充内容直到折叠，并且不会进一步向下滚动(不响应鼠标滚轮或触摸手势)。

View 类中创建 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 类，我希望进一步详细开发它并成为更大的 ScrollView 序列的一部分:

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