GridLayout in ScrollView - NativeScript

0
votes

I am new to NativeScript. I have 4 images in my page and I want to achieve this.

enter image description here

Except I want my cover image to be of full-height of the screen. This is the code I'm trying.

<ScrollView>
    <StackLayout height="100%" width="100%">
      <GridLayout columns="*, *" rows="5*, *, *">
        <StackLayout
          :row="0"
          :col="0"
          :colSpan="2"
          class="bgImage coverImage"
          :style="{backgroundImage:`url('${defaultImg}')`}"
        ></StackLayout>
        <StackLayout
          :row="calcRow(idx)"
          :col="calcCol(idx)"
          :colSpan="idx==0?2:1"
          v-for="(item,idx) in event.imgs"
          :key="idx"
          class="bgImage eventImage"
          :style="{backgroundImage:`url('${item}')`}"
        ></StackLayout>
      </GridLayout>
    </StackLayout>
  </ScrollView>

If I didn't give height="100%" to StackLayout it's not even loading the images. If I do give it then there is no scroll.

Here is the playground link Playground Link

1
nativescriptnativescript-vue
playground will be helpful to debug. - Narendra
Updated the question with playground link. - Lucifer
It is showing exactly same as your photo in the question. What do you want to achive here? Redish Tree pic(sun in backdrop ) to be displayed full screen and other four as overlay ? - Narendra
Red image to have full screen and other images to be below it when you scroll. - Lucifer
Are you looking for something like this - play.nativescript.org/?template=play-vue&id=cRGZRW&v=2 - Manoj

1 Answers

1
votes

You may use the layoutChanged event of your ScrollView where you may calculate the height of it and use it as height for the first image.

Playground Sample