爲什麼列表視圖不滾動滾動視圖裏面在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>