Search code examples
nativescriptscrollviewnativescript-angular

Nativescript Angular ScrollView tether item to top of page

I have a scrollview with an image at the top, then a searchbar and a list. I'm trying to make it so that the searchbar doesn't leave the top of the page when scrolling up so that the list keeps scrolling underneath it.

Format:

<ScrollView>
  <Image src="testimage.png"></Image>
  <Searchbar></Searchbar>
  <ListView items></ListView>
</ScrollView>
Is there a way to do this in NativeScript?

Solution

  • Use GridLayout, ListView itself has built-in scrollbar.

    <GridLayout rows="auto,auto,*">
  <!-- you might want to set a height for image, depends on your image source -->
  <Image row="0" src="testimage.png"></Image>
  <Searchbar row="1"></Searchbar>
  <ListView row="2" ...></ListView>
</GridLayout>