CODEWITHSUNDEEP
javascriptangularjsfamo.us
mellors
mellors

Reputation: 31

Combine GridLayout and ScrollView in Famo.us JS

I'm trying to insert a grid layout into a scroll view in famo.us (using famo.us with angular) and the most obvious way is working

<fa-view>
    <fa-scroll-view fa-pipe-from="eventHandler" fa-options="scrollView">
        <fa-modifier fa-size="[undefined, 3000]">
            <fa-grid-layout fa-options="results.options">
                <fa-modifier ng-repeat="grid in results.grids" fa-size="[undefined, results.rowHeight]">
                    <fa-surface class="item" fa-background-color="'grey'" fa-pipe-to="eventHandler">
                        <h5>{{grid.content.cleanTitle}}</h5>
                    </fa-surface>
                </fa-modifier>
            </fa-grid-layout>
        </fa-modifier>
    </fa-scroll-view>
</fa-view>

But I wonder if this is really clever. Instead of pushing many views to the scroll view it has actually only one view (the grid layout). I can imagine, that the famo.us guys implemented a couple of perfomance hacks regarding scrolling and I fear, that one single grid-layout is not the right choise. Is there a better way? Maybe create a view for every "row" and arrange the items per view?

Thanks!

Upvotes: 2

Views: 542

Answers (2)

IjzerenHein
IjzerenHein

Reputation: 2755

When using vanilla famo.us you can easily do this with the FlexScrollView which supports a CollectionLayout:

var scrollView = new FlexScrollView({ layout: CollectionLayout, layoutOptions: { itemSize: [200, 200] } });

Documentation:

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

Upvotes: 1

Michael Kuczera
Michael Kuczera

Reputation: 13

I see nothing against this approach. I´m currently having an Horizontal Scrollview with one Grid Layout and it´s working pretty fine. Using multiple Views with Grid Views inside will only end in an overload of Grid views.

Upvotes: 0

Related Questions