How to create empty space between the Surfaces in ScrollView in famo.us?

Question

I've created a horizontal ScrollView and added some Surfaces to it. I want to have an empty space between the Surfaces when I scroll (swipe) the view. I've tried setting the margins, padding, borders, etc.. in the properties of the Surfaces and the ScrollView but the surfaces remain connected together no matter what.

Does anyone know how I can achieve this?

score 4 · Accepted Answer · answered Jun 18 '14 at 14:36

This could be done a few ways. The non-famo.us approach would be to add surfaces and use Content HTML to create margins. For the sake of the example, I will assume you want a list of surfaces that just need some margin!

I knew about itemSpacing in SequntialLayout, and was surprised to not find such a thing in ScrollView as well. So to solve the problem, I simply added all my surfaces to a SequentialLayout, and then add that as the sole item in Scrollview.

Also note I added a background surface, to capture the mouse events that happen between the surfaces!

Here is what I did.. Hope it helps!

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 mainContext = Engine.createContext();

var bg = new Surface({ size:[undefined,undefined] });

var scrollview = new Scrollview();
var scrollSurfaces = [];

scrollview.sequenceFrom(scrollSurfaces);

var sequentialLayout = new SequentialLayout({itemSpacing:20});
var surfaces = [];
sequentialLayout.sequenceFrom(surfaces);

for (var i = 0; i < 40; i++) {
    var surface = new Surface({
        content: "Surface: " + (i + 1),
        size: [undefined, 200],
        properties: {
            backgroundColor: "hsl(" + (i * 360 / 40) + ", 100%, 50%)",
            lineHeight: "200px",
            textAlign: "center"
        }
    });

    surface.pipe(scrollview);
    surfaces.push(surface);
}

scrollSurfaces.push(sequentialLayout);

bg.pipe(scrollview);

mainContext.add(bg);

mainContext.add(scrollview);

Thanks for your answer, but this works only if the ScrollView is in vertical position. If I do: var scrollview = new Scrollview({ direction: 0 }); the app becomes unresponsive. — Marko Letic, Jun 19 '14 at 20:43
then do.. new SequentialLayout({itemSpacing:20, direction:0 }) — johntraver, Jun 19 '14 at 20:49
I guess that only works if you know how wide your surfaces are.. eg.. size: [200, undefined] works, size: [undefined, undefined] does not.. — johntraver, Jun 19 '14 at 20:52

Kingstone · Answer 2 · 2014-07-04T04:42:33.507

I think using a ContainerSurface is better, use many containsurfaces to contain the surface.You should emulate in Apple iphone 5.In other environment, you should adjust the origin of scrollModifier to fix.

define(function(require, exports, module) {
    var Engine           = require("famous/core/Engine");
    var Surface          = require("famous/core/Surface");
    var Transform        = require("famous/core/Transform");
    var View             = require('famous/core/View');
    var StateModifier    = require('famous/modifiers/StateModifier');
    var Scrollview       = require("famous/views/Scrollview");
    var Modifier         = require("famous/core/Modifier");
    var ContainerSurface = require("famous/surfaces/ContainerSurface");


    var mainContext = Engine.createContext();

    var scrollview = new Scrollview({
        direction: 0,
        paginated: 'true',
        pageStopSpeed: 2
    });

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

    for (var i = 0; i < 40; i++) {

        var container = new ContainerSurface();

        var temp = new Surface({
            content: "Surface: " + (i + 1),
            size: [window.innerWidth -40, window.innerHeight - 40],
            properties: {
                backgroundColor: "hsl(" + (i * 360 / 40) + ", 100%, 50%)",
                lineHeight: "200px",
                textAlign: "center"
            }
        });

        // wrong
        // will return temp as scrollnode, it will ignore the container
        // var scrollnode = container.add(temp)

        // this is right
        container.add(temp);
        var scrollnode = container;

        temp.pipe(scrollview);
        scrollnodes.push(scrollnode);

    }

    var scrollModifier = new StateModifier({
        origin: [0.07, 0.04]
    });

    mainContext.add(scrollModifier).add(scrollview);
});

score 0 · Answer 3 · answered Dec 17 '14 at 15:46

You could also use the FlexScrollView, which supports a spacing option to achieve this:

var scrollView = new FlexScrollView({ layoutOptions: { spacing: 10 } });

https://github.com/IjzerenHein/famous-flex/blob/master/tutorials/FlexScrollView.md https://github.com/IjzerenHein/famous-flex

How to create empty space between the Surfaces in ScrollView in famo.us?

3 Answers3