Nativescript Listview 不可滚动

Question

我正在使用 Nativescript Vue 开发应用程序。我有一个 WrapLayout，里面有 ListView（还有其他组件）。

     <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 是计算的属性返回数组。

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

然后我将项目添加到应用程序中的 ListView（selectedDayNotes 更新并且 ListView 显示新元素），但 ListView 不可滚动。我应该怎么做才能让它滚动？

Answer 1

好吧，我设法将 ListView 包装到 ScrollView 中。有点奇怪 - 文档对此只字不提。

代码如下：

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

我还在 CSS 中设置了所需的 ScrollView 高度。

Nativescript Listview 不可滚动

Nativescript Listview not scrollable

android

listview

nativescript

nativescript-vue