Question

我想将视图添加到（水平）scrollview并将管道添加到MouseSync。滚动适用于曲面，但不适用于视图。

使用鼠标滚动适用于Surfaces，但对于添加到scrollview的TestView完全忽略。

我的main.js看起来像这样：

define(function(require, exports, module) {
    var Engine            = require('famous/core/Engine');
    var Surface           = require('famous/core/Surface');
    var Scrollview        = require('famous/views/Scrollview');
    var SequentialLayout   = require('famous/views/SequentialLayout');
    var MouseSync         = require('famous/inputs/MouseSync');
    var TestView = require('TestView');

    var context = Engine.createContext();

    var scrollview = new Scrollview( {
       direction:0,
       friction:0.001,
       drag:0.001
    });

    var cells = [];
    scrollview.sequenceFrom(cells);

    var mouse = new MouseSync({direction:0});
    var sequence = new SequentialLayout( { direction:0 } );
    var surfaces = [];
    sequence.sequenceFrom(surfaces);

    var surface1 = new Surface({
        size: [200,undefined],
        content: '<div>I am surface 1</div>',
        properties: {
            backgroundColor: 'red'
         }
     });

    var surface2 = new Surface({
        size: [200,undefined],
        content: '<div>I am surface 2</div>',
        properties: {
            backgroundColor: 'green'
        }
    });

    var testview = new TestView({size: [200, undefined]});

    surface1.pipe(mouse);
    surface2.pipe(mouse);
    testview.pipe(mouse);

    surface1.pipe(scrollview);
    surface2.pipe(scrollview);
    testview.pipe(scrollview);

    surfaces.push(surface1);
    surfaces.push(testview);
    surfaces.push(surface2);

    mouse.pipe(scrollview);
    cells.push(sequence);
    context.add(scrollview);    
});

和TestView一样：

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

    function TestView(size){
        View.apply(this,arguments);
        this.mainNode = this.add(this.rootModifier);
        _createBackground.call(this, size);
    }

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


    function _createBackground(size){
        var background = new Surface({
            size: size.size,
            content: 'testview',
            properties: {
                backgroundColor: '#444'
            }
        });
        this.mainNode.add(background);
    }
    module.exports = TestView;
});

我是否必须以某种方式从视图管道滚动到父scrollView？

非常感谢任何帮助。

Answer 1

我相信它就像将TestView的背景表面传递给视图_eventOutput处理程序一样简单。

试试这个_createBackground函数..

function _createBackground(size){
    var background = new Surface({
        size: size.size,
        content: 'testview',
        properties: {
            backgroundColor: '#444'
        }
    });

    // Add this line
    background.pipe(this._eventOutput);

    this.mainNode.add(background);
}

希望这有帮助！

添加视图到scrollview和管道到鼠标

1 个答案: