Отображение сетки в ScrollView - NativeScript

#nativescript #nativescript-vue

Вопрос:

Я новичок в 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, он даже не загружает изображения. Если я это сделаю, прокрутки не будет.

Вот ссылка на игровую площадку Ссылка на игровую площадку

1. игровая площадка будет полезна для отладки.

2. Обновлен вопрос с помощью ссылки на игровую площадку.

3. Он отображается точно так же, как ваша фотография в вопросе. Чего вы хотите достичь здесь? Изображение красного дерева (солнце на заднем плане) будет отображаться во весь экран, а остальные четыре в качестве наложения?

4. Красное изображение, чтобы иметь полный экран, а другие изображения должны быть под ним при прокрутке.

5. Вы ищете что-то вроде этого — play.nativescript.org/?template=play-vueamp;id=cRGZRWamp;v=2

Ответ №1:

Вы можете использовать layoutChanged событие вашего ScrollView , где вы можете вычислить его высоту и использовать его в качестве высоты для первого изображения.

Пример игровой площадки