ScrollView中的GridLayout-NativeScript

Question

我是NativeScript的新手。我的页面上有4张图片，我想要实现这一目标。

除了我希望我的封面图像全屏显示。这是我正在尝试的代码。

<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>

如果我不给StackLayout设置height =“ 100％”，那么它甚至都不会加载图像。如果我给它，那么就没有滚动。

这是游乐场链接Playground Link

Answer 1

您可以使用layoutChanged中的ScrollView事件，在其中可以计算它的高度并将其用作第一张图像的高度。

Playground Sample