ScrollView 中的 GridLayout - NativeScript答案

【问题标题】：GridLayout in ScrollView - NativeScriptScrollView 中的 GridLayout - NativeScript
【发布时间】：2019-04-12 01:29:28
【问题描述】：

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

如果我没有将 height="100%" 提供给 StackLayout，它甚至不会加载图像。如果我确实给了它，那么就没有滚动条。

这里是操场链接Playground Link

【问题讨论】：

playground 将有助于调试。
用游乐场链接更新了问题。
它显示的与您在问题中的照片完全相同。你想在这里达到什么目的？红树图片（背景中的太阳）全屏显示，其他四个作为叠加显示？
红色图像具有全屏显示，其他图像在滚动时位于其下方。
你在寻找这样的东西吗 - play.nativescript.org/?template=play-vue&id=cRGZRW&v=2

标签： nativescript nativescript-vue

【解决方案1】：

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

Playground Sample

【讨论】：