Question

我是Famo.us的新手，我正在尝试通过向PageView所在的PageView添加一个scrollview（在_createBody函数中）来扩展Timbre示例应用程序。换句话说，我正在尝试添加类似于Facebook或Tango等的Feed。我在网上找到了两段代码（下面的链接）。我在控制台日志中没有错误，但滚动视图不会显示，所以我不确定我缺少什么。非常感谢您的指导（也很想知道是否有更好的方法）。最后，这是我在StackOverflow上的第一篇文章，所以如果我能以更好的方式揭露我的问题，请告诉我。

我一直用来获取指导的链接： StackOverflow Famo.us swipe on scrollview JSFiddle

/*** AppView.js ***/

define(function(require, exports, module) {
    var View            = require('famous/core/View');
    var Surface         = require('famous/core/Surface');
    var Modifier        = require('famous/core/Modifier');
    var Transform       = require('famous/core/Transform');
    var StateModifier   = require('famous/modifiers/StateModifier');
    var Easing          = require('famous/transitions/Easing');
    var Transitionable  = require('famous/transitions/Transitionable');
    var GenericSync     = require('famous/inputs/GenericSync');
    var MouseSync       = require('famous/inputs/MouseSync');
    var TouchSync       = require('famous/inputs/TouchSync');
    GenericSync.register({'mouse': MouseSync, 'touch': TouchSync});

    var PageView      = require('views/PageView');
    var MenuView      = require('views/MenuView');
    var StripData     = require('data/StripData');

    function AppView() {
        View.apply(this, arguments);

        this.menuToggle = false;
        this.pageViewPos = new Transitionable(0);

        _createPageView.call(this);
        _createMenuView.call(this);

        _setListeners.call(this);
        _handleSwipe.call(this);
    }

    AppView.prototype = Object.create(View.prototype);
    AppView.prototype.constructor = AppView;

    AppView.DEFAULT_OPTIONS = {
        openPosition: 276,
        transition: {
            duration: 300,
            curve: 'easeOut'
        },
        posThreshold: 138,
        velThreshold: 0.75
    };

    function _createPageView() {
        this.pageView = new PageView();
        this.pageModifier = new Modifier({
            transform: function() {
                return Transform.translate(this.pageViewPos.get(), 0, 0);
            }.bind(this)
        });

        this._add(this.pageModifier).add(this.pageView);
    }

    function _createMenuView() {
        this.menuView = new MenuView({ stripData: StripData });

        var menuModifier = new StateModifier({
            transform: Transform.behind
        });

        this.add(menuModifier).add(this.menuView);
    }

    function _setListeners() {
        this.pageView.on('menuToggle', this.toggleMenu.bind(this));
    }

    function _handleSwipe() {
        var sync = new GenericSync(
            ['mouse', 'touch'],
            {direction : GenericSync.DIRECTION_X}
        );

        this.pageView.pipe(sync);

        sync.on('update', function(data) {
            var currentPosition = this.pageViewPos.get();
            if(currentPosition === 0 && data.velocity > 0) {
                this.menuView.animateStrips();
            }

            this.pageViewPos.set(Math.max(0, currentPosition + data.delta));
        }.bind(this));

        sync.on('end', (function(data) {
            var velocity = data.velocity;
            var position = this.pageViewPos.get();

            if(this.pageViewPos.get() > this.options.posThreshold) {
                if(velocity < -this.options.velThreshold) {
                    this.slideLeft();
                } else {
                    this.slideRight();
                }
            } else {
                if(velocity > this.options.velThreshold) {
                    this.slideRight();
                } else {
                    this.slideLeft();
                }
            }
        }).bind(this));
    }

    AppView.prototype.toggleMenu = function() {
        if(this.menuToggle) {
            this.slideLeft();
        } else {
            this.slideRight();
            this.menuView.animateStrips();
        }
    };

    AppView.prototype.slideLeft = function() {
        this.pageViewPos.set(0, this.options.transition, function() {
            this.menuToggle = false;
        }.bind(this));
    };

    AppView.prototype.slideRight = function() {
        this.pageViewPos.set(this.options.openPosition, this.options.transition, function() {
            this.menuToggle = true;
        }.bind(this));
    };

    module.exports = AppView;
});

/*** PageView.js ***/

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');
    var HeaderFooter    = require('famous/views/HeaderFooterLayout');
    var ImageSurface    = require('famous/surfaces/ImageSurface');
	var Scrollview      = require('famous/views/Scrollview');

    function PageView() {
        View.apply(this, arguments);

        _createBacking.call(this);
        _createLayout.call(this);
        _createHeader.call(this);
        _createBody.call(this);

        _setListeners.call(this);
    }

    PageView.prototype = Object.create(View.prototype);
    PageView.prototype.constructor = PageView;

    PageView.DEFAULT_OPTIONS = {
        headerSize: 44
    };

    function _createBacking() {
        var backing = new Surface({
            properties: {
                backgroundColor: 'black',
                boxShadow: '0 0 20px rgba(0,0,0,0.5)'
            }
        });

        this.add(backing);
    }

    function _createLayout() {
        this.layout = new HeaderFooter({
            headerSize: this.options.headerSize
        });

        var layoutModifier = new StateModifier({
            transform: Transform.translate(0, 0, 0.1)
        });

        this.add(layoutModifier).add(this.layout);
    }

    function _createHeader() {
        var backgroundSurface = new Surface({
            properties: {
                backgroundColor: 'black'
            }
        });

        this.hamburgerSurface = new ImageSurface({
            size: [44, 44],
            content : 'img/hamburger.png'
        });

        var searchSurface = new ImageSurface({
            size: [232, 44],
            content : 'img/search.png'
        });

        var iconSurface = new ImageSurface({
            size: [44, 44],
            content : 'img/icon.png'
        });

        var backgroundModifier = new StateModifier({
            transform : Transform.behind
        });

        var hamburgerModifier = new StateModifier({
            origin: [0, 0.5],
            align : [0, 0.5]
        });

        var searchModifier = new StateModifier({
            origin: [0.5, 0.5],
            align : [0.5, 0.5]
        });

        var iconModifier = new StateModifier({
            origin: [1, 0.5],
            align : [1, 0.5]
        });

        this.layout.header.add(backgroundModifier).add(backgroundSurface);
        this.layout.header.add(hamburgerModifier).add(this.hamburgerSurface);
        this.layout.header.add(searchModifier).add(searchSurface);
        this.layout.header.add(iconModifier).add(iconSurface);
    }

    function _createBody() {
		var surfaces = [];
		  this.scrollview = new Scrollview();

		  var temp;
		  for (var i = 0; i < 30; i++) {
		    temp = new Surface({
		      size: [undefined, 80],
		      content: 'Surface: ' + (i + 1),
		      properties: {
		        textAlign: 'left',
		        lineHeight: '80px',
		        borderTop: '1px solid #000',
		        borderBottom: '1px solid #fff',
		        backgroundColor: '#ffff00',
		        fontFamily: 'Arial',
		        backfaceVisibility: 'visible',
		        paddingLeft: '10px'
		      }
		    });

		    temp.pipe(this.scrollview);
		    surfaces.push(temp);
		  }

		  this.scrollview.sequenceFrom(surfaces);

		  this.bodyContent = new Surface({
		    size: [undefined, undefined],
		    properties: {
		      backgroundColor: '#f4f4f4'
		    }
		  });


		  this.layout.content.add(this.bodyContent);
		  
		}

    function _setListeners() {
        this.hamburgerSurface.on('click', function() {
            this._eventOutput.emit('menuToggle');
        }.bind(this));

		//this.bodyContent.pipe(this._eventOutput);
		  this.scrollview.pipe(this._eventOutput);
    }

    module.exports = PageView;
});

Answer 1

您需要将this.scrollview添加到页面上的layout.content元素中。把它放在this.bodyContent的位置。 layout.content是页面内容的节点。

  //this.layout.content.add(this.bodyContent);
  this.layout.content.add(this.scrollview);

Famo.us Timbre app Scrollview

1 个答案: