Nativescript Listview 不可滚动

Posted 2023-04-14

【中文标题】Nativescript Listview 不可滚动

【英文标题】：Nativescript Listview not scrollable

【发布时间】：2019-10-18 02:27:03

【问题描述】：

我正在使用 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 不可滚动。我应该怎么做才能让它滚动？

【参考方案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 高度。

【讨论】：

不建议在ScrollView中使用ListView。因为 ListView 本身是 ScrollView 的扩展版本，因此 ListView 本身应该是可滚动的。如果您仍然有滚动问题，请分享一个 Playground 示例，以便重现该问题。