为什么列表视图不滚动滚动视图里面在nativescrit angular2

Question

＃我使用了滚动列表视图里面，但列表视图不滚动视图作为*父视图

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

内滚动通过包装滚动型成尝试它AbsoluteLayout

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

Answer 2

在另一个滚动视图内不是一个好习惯。这是行不通的scrollview试图计算无限视图，并与一个可滚动的内部可以工作只是在某些情况下控制父视图，但不要去那种痛苦的方式。

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

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

The SearchBar is fixed and the List scrolllable

Answer 3

看那video，玩模拟器，你会看到，它似乎工作，但“计算机鼠标滚动”当你使用点击尝试beggining滚动它不再工作，并且是因为屏幕不知道哪个可滚动元素必须滚动。

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

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

Answer 4

尝试使用Repeater而不是ListView，如https://docs.nativescript.org/cookbook/ui/repeater中所述。以下是如何在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>