I'm developing an app using Nativescript Vue. I have an WrapLayout and inside it I have ListView (and other components too).

     <ListView for="event in selectedDayNotes" class="home__notes-list">
        <v-template>
          <WrapLayout class="home__notes-list-item">
            <Label class="home__notes-list-item-note" :text="event.title" />
            <Label class="home__notes-list-item-time" :text="event.startDate.getHours() + ':' + event.startDate.getMinutes() + ' - '" />
            <Label class="home__notes-list-item-time" :text="event.endDate.getHours() + ':' + event.endDate.getMinutes()" />
          </WrapLayout>
        </v-template>
      </ListView>  

selectedDayNotes is a computed property returning an array.

SCSS:

  &__notes-list-item {
    background: white;
  }

  &__notes-list-item-note {
    font-size: 15px;
    width: 100%;
  }

  &__notes-list-item-time {
    font-size: 18px;
    font-weight: 600;
  } 

So then I add items to the ListView in the app (selectedDayNotes updates and the ListView shows new elements), but ListView is not scrollable. What should I do to make it scroll?

1 Answers

0
boriswinner On

Well, I managed to get this working wrapping ListView into ScrollView. Kinda strange - the docs say nothing about it.

Here is the code:

      <ScrollView class="home__notes-list-wrapper">
        <ListView for="event in selectedDayNotes" class="home__notes-list">
          <v-template>
          //whatever you want inside some sort of layout
            <WrapLayout class="home__notes-list-item">
              <Label class="home__notes-list-item-note" :text="event.title" />
              <Label class="home__notes-list-item-time" :text="event.startDate.getHours() + ':' + event.startDate.getMinutes() + ' - '" />
              <Label class="home__notes-list-item-time" :text="event.endDate.getHours() + ':' + event.endDate.getMinutes()" />
            </WrapLayout>
          </v-template>
        </ListView> 
      </ScrollView> 

Also I set desired ScrollView height in CSS.