Adding Views to Scrollview in Famo.us -
this issue concerns adding views scrollview (rather surfaces).
when adding view single surface seems work intended. each view stacks neatly on top of 1 another.
however when adding view multiple surfaces not stack nicely. in case each view seems set exact height of scrollview viewport. if each view 100px tall, , scrollview viewport 500px tall, there 400px of whitespace between each view when scrolling. if view taller scrollview vp, views overlap.
so question is: how add view multiple surfaces scrollview , have them stack nicely?
example function build scrollview...
function _createscrollview() { var scrollview = new scrollview(); var surfaces = []; scrollview.sequencefrom(surfaces); (var = 0, temp; < 10; i++) { temp = new testview(); temp.pipe(scrollview); surfaces.push(temp); } this.add(scrollview); }
example of view...
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'); // constructor function testview() { view.apply(this, arguments); _createbox_a.call(this); _createbox_b.call(this); } // prototype testview.prototype = object.create(view.prototype); testview.prototype.constructor = testview; // options testview.default_options = {}; // helper functions function _createbox_a() { var surf = new surface({ size: [undefined, 150], properties: { backgroundcolor: 'red', } }); surf.pipe(this._eventoutput); this.add(surf); } function _createbox_b() { var surf = new surface({ size: [undefined, 150], properties: { backgroundcolor: 'blue' } }); var mod = new statemodifier({ transform: transform.translate(0, 150, 0) }); surf.pipe(this._eventoutput); this.add(mod).add(surf); } module.exports = testview; });
view not know how large supposed be. if call temp.getsize() in example, 'undefined' returned. want explicitly set size during initialization.. if must set size after initialization, be..
view.setoptions({size:somesize});
here how _createscrollview look..
hope helps!
function _createscrollview() { var scrollview = new scrollview(); var surfaces = []; scrollview.sequencefrom(surfaces); (var = 0, temp; < 10; i++) { temp = new testview({size:[undefined,300]}); temp.pipe(scrollview); surfaces.push(temp); } this.add(scrollview); }
Comments
Post a Comment