Question

＃我在Scrollview中使用listview但是listview在scrollview中不能作为顶级父视图滚动

component.html
    <ScrollView>
  <StackLayout class="zindex">
        <!--<AutoComplete [items]="ArrayVillage" (itemTap)="itemTapped($event)"> </AutoComplete>-->
        <SearchBar row="0" #sb hint="Search for a country and press enter" (clear)="onClear()" [text]="searchPhrase" (submit)="onSubmit(sb.text)"></SearchBar>
        <ListView row="1" [items]="myItems" class="list-group">
          <template let-item="item">
            <GridLayout class="item" class="list-group-item">
              <Label [text]="item.name" class="list-group-item-heading"></Label>
            </GridLayout>
          </template>
        </ListView>
      </StackLayout>
 <ScrollView>

Answer 1

尝试使用Repeater而不是https://docs.nativescript.org/cookbook/ui/repeater中提到的ListView。以下是如何在ScrollView中包含Repeater并将整个布局作为可滚动方式的示例。

<ScrollView>
    <StackLayout class="margin">
        <Label text="{{ description }}"></Label>
        <Repeater items="{{ options }}" row="1">
            <Repeater.itemTemplate>
                <StackLayout>
                    <Label text="{{ description }}"></Label>
                </StackLayout>
            </Repeater.itemTemplate>
        </Repeater>
    </StackLayout>
</ScrollView>

Answer 2

通过将scrollview包装到AbsoluteLayout

中来尝试它

<AbsoluteLayout>
    <ScrollView>
        <StackLayout class="zindex">
         //Rest of stuff
        </StackLayout>
        <ScrollView>
</AbsoluteLayout>

Answer 3

在其他内容中使用滚动视图不是一个好习惯。它并不起作用因为滚动视图尝试计算无限视图并且使用可滚动内部可以在某些情况下控制父视图，但不要那么痛苦。

在您的代码中我有一个问题，您为什么要滚动SearchBar？尝试这种结构我认为是你想要的。

<StackLayout>
<SearchBar></SearchBar>
<ListView>
    <template>
        <GridLayout >
            <Label ></Label>
        </GridLayout>
    </template>
</ListView>

The SearchBar is fixed and the List scrolllable

Answer 4

看看video，玩模拟器，你会发现在开始它似乎工作，但当你使用点击试图滚动它是“电脑鼠标滚动”不再工作，是因为屏幕不知道哪个可滚动元素必须滚动。

要做2个可滚动的部分可以是一个解决方案，如视频结尾所示（我在使用Javascript的Nativescript中实现，因为我在一个项目中工作但几乎相同）

<StackLayout>
    <Label fontSize="20" color="blue" text="You can do two scrollable parts" textWrap="true" />
    <Button text="to" />
    <ListView items="{{ items }}"  height="300" loaded="onLoaded" itemLoading="onItemLoading" itemTap="onItemTap">
        <ListView.itemTemplate>
                <Label text="{{ name }}" textWrap="true" />
        </ListView.itemTemplate>
    </ListView>
<ScrollView>
    <StackLayout>
        <Button text="1" />
        <Button text="2" />
        <Button text="3" />
        <Button text="4" />
        <Button text="5" />
        <Button text="6" />
        <Button text="3" />
        <Button text="4" />
        <Button text="5" />
        <Button text="6" />
    </StackLayout>
</ScrollView>
</StackLayout>

为什么Listview不能在nativescrit angular2中的scrollview内滚动

4 个答案: