NativeScript Scroll ListView with Title

Question

I have this code in main-page.xml:

<GridLayout rows="auto, *">

  <Label text="Title" class="title" row="0" />

  <ListView id="listView" items="{{ listItems }}" row="1">

    <ListView.itemTemplate>
      <StackLayout>
        <Button text="{{ name }}" tap="dd" />
      </StackLayout>
    </ListView.itemTemplate>

  </ListView>

</GridLayout>

When I scroll the title stick to the top (stay and don't move), is there is a way to make it behave normally ?

Are the rest of the elements scrolling underneath the title? Is the amount of items longer than the screen of your testing device? — zJorge
– zJorge, Commented Jul 23, 2016 at 14:56
Yes the elements scroll underneath the title, and Yes the amount of items longer than the screen of the device. — kayne
– kayne, Commented Jul 23, 2016 at 15:10
I think this is the expected behaviour. Add another set of title and list and scroll to see what happens. It should be similar to what you see when scrolling down your Instagram feed, author stays on top as long as the displayed content belongs to this author. — zJorge
– zJorge, Commented Jul 23, 2016 at 15:27

Termininja · Accepted Answer · 2016-12-17 11:48:47Z

1

I found a cleaner solution using : https://docs.nativescript.org/cookbook/ui/repeater

<ScrollView>

  <StackLayout>

    <Label text="Title" class="title" />

    <Repeater id="listItems" items="{{ listItems }}">

      <Repeater.itemTemplate>
        <StackLayout>
          <Button text="{{ name }}" tap="loadGuide" />
        </StackLayout>
      </Repeater.itemTemplate>

   </Repeater>

 </StackLayout>

edited Dec 17, 2016 at 11:48

Termininja

7,05412 gold badges51 silver badges50 bronze badges

answered Jul 24, 2016 at 11:17

kayne

3492 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Vladimir Amiorkov · Accepted Answer · 2016-07-24 08:36:41Z

0

This is definitely the expected behavior when placing a Label at a row of a GridLayout which is set to auto. What you want to achieve can be done but will require additional implementations for example like this (No boring ActionBar) third party Android library. What you can do is either implement the same using pure JavaScript/TypeScript directly in your app (by managing the size of the ActionBar) or create a custom NativeScript plugin that uses the mentioned android library.

One of the many beauties of NativeScript is that 100% of the native iOS and Android APIs are accessible meaning anything that is achievable in an native iOS or Android app is achievable in {N}.

answered Jul 24, 2016 at 8:36

Vladimir Amiorkov

2,9514 gold badges22 silver badges41 bronze badges

Collectives™ on Stack Overflow

NativeScript Scroll ListView with Title

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related