CODEWITHSUNDEEP
nativescriptnativescript-vue
Lucifer
Lucifer

Reputation: 1079

GridLayout in ScrollView - NativeScript

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

Upvotes: 0

Views: 387

Answers (1)

Manoj
Manoj

Reputation: 21908

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

Upvotes: 1

Related Questions