Question

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

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

Famo.us滚动视图不滚动

1 个答案: