Как создать пустое пространство между поверхностями в ScrollView в famo.us?

Я создал горизонтальный ScrollView и добавил к нему несколько поверхностей. Я хочу, чтобы между поверхностями было пустое пространство, когда я прокручиваю (прокручиваю) представление. Я пытался установить поля, отступы, границы и т. д. в свойствах поверхностей и прокрутки, но поверхности остаются связанными вместе, несмотря ни на что.

Кто-нибудь знает, как я могу этого добиться?


famo.us
person Marko Letic    schedule 18.06.2014    source источник

Ответы (3)


arrow_upward
4
arrow_downward

Это можно сделать несколькими способами. Подход, не известный нам, заключается в добавлении поверхностей и использовании Content HTML для создания полей. Ради примера я предположу, что вам нужен список поверхностей, для которых просто нужен запас!

Я знал об itemSpacing в SequntialLayout и был удивлен, не найдя такого в ScrollView. Поэтому, чтобы решить эту проблему, я просто добавил все свои поверхности в SequentialLayout, а затем добавил их как единственный элемент в Scrollview.

Также обратите внимание, что я добавил фоновую поверхность, чтобы фиксировать события мыши, которые происходят между поверхностями!

Вот что я сделал .. Надеюсь, это поможет!

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);
person johntraver    schedule 18.06.2014
comment
Спасибо за ваш ответ, но это работает, только если ScrollView находится в вертикальном положении. Если я это сделаю: var scrollview = new Scrollview({ direction: 0 }); приложение перестает отвечать. - person Marko Letic; 20.06.2014
comment
затем сделайте.. новый SequentialLayout({itemSpacing:20, direction:0}) - person johntraver; 20.06.2014
comment
Я предполагаю, что это работает, только если вы знаете, насколько широки ваши поверхности.. например.. size: [200, undefined] работает, size: [undefined, undefined] не работает.. - person johntraver; 20.06.2014

arrow_upward
0
arrow_downward

Я думаю, что использование ContainerSurface лучше, используйте много содержащих поверхностей, чтобы содержать поверхность. Вы должны эмулировать в Apple iphone 5. В другой среде вы должны исправить происхождение scrollModifier.

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);
});
person Kingstone    schedule 04.07.2014

arrow_upward
0
arrow_downward

Вы также можете использовать FlexScrollView, который поддерживает опцию spacing для достижения этой цели:

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

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

person IjzerenHein    schedule 17.12.2014