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无法滚动

1 个答案: