Блог

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

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

Это можно сделать несколькими способами. The non-famo.us подход заключался бы в добавлении поверхностей и использовании HTML-кода содержимого для создания полей. Для примера я предположу, что вам нужен список поверхностей, для которых просто нужен некоторый запас!

Я знал о itemSpacing в SechntialLayout и был удивлен, не найдя такой вещи и в 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);
  

Я думаю, что лучше использовать ContainerSurface, используйте много containsurfaces для размещения поверхности.Вы должны эмулировать в Apple iphone 5.In в другой среде вы должны настроить происхождение 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);
});
  

Вы также можете использовать 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