Angular Nativescript - 在AbsoluteLayout中使用ScrollView

我正在構建一個照片瀏覽器應用程序，用戶應該在頁面之間滑動以查看不同的照片。這裏是目前適合我的視圖。Angular Nativescript - 在AbsoluteLayout中使用ScrollView

<ScrollView orientation="horizontal" ios.pagingEnabled="true" > 
    <StackLayout orientation="horizontal"> 
    <Image *ngFor="#picture of buffer" [src]="picture.originUrl" stretch="aspectFit"></Image> 
    </StackLayout> 
</ScrollView>

問題是當我嘗試應用的覆蓋。所以我試圖把所有東西都包裝在一個AbsoluteLayout中，這樣我就可以使ScrollView正常運行，但將重疊在之上。當我這樣做時，滾動會全部打破。這裏是打破滾動的視圖：

<AbsoluteLayout> 
    <Label text="overlay" left="0" tope="0"></Label> 
    <ScrollView orientation="horizontal" ios.pagingEnabled="true" left="0" top="0"> 
    <StackLayout orientation="horizontal"> 
     <Image *ngFor="#picture of buffer" [src]="picture.originUrl" stretch="aspectFit"></Image> 
    </StackLayout> 
    </ScrollView> 
</AbsoluteLayout>

佈局似乎正常工作，但滾動中斷。任何人有任何想法如何完成此？

來源

2016-04-14 jonnysamps

：https://github.com/NativeScript/nativescript-angular/issues/184

的問題來自於AbsoluteLayout措施，無限空間及其所有子的事實，所以滾動型是與其內容一樣大，實際上滾動不起作用。可能的解決方法是爲ScrollView設置大小。在這種特定情況下，可以使用％佈局大小。

<AbsoluteLayout> 
    <Label text="overlay" left="0" top="0"></Label> 
    <ScrollView orientation="horizontal" ios.pagingEnabled="true" left="0" top="0" width="100%" height="75%"> 
    <StackLayout orientation="horizontal"> 
     <Image *ngFor="#picture of pictures" [src]="picture.originUrl" stretch="aspectFit"></Image> 
    </StackLayout> 
    </ScrollView> 
</AbsoluteLayout>

這兩個％值都是測量父佈局控件（AbsoluteLayout）的大小的百分比。由於絕對佈局實際上是根元素，因此這些值將是屏幕大小的百分比。

來源

2016-04-21 16:29:13 jonnysamps

如果我在做這個佈局我這樣做：

<GridLayout rows="*"> 
    <ScrollView row="0" orientation="horizontal" ios.pagingEnabled="true"> 
    <StackLayout orientation="horizontal"> 
     <Image *ngFor="#picture of buffer" [src]="picture.originUrl" stretch="aspectFit"></Image> 
    </StackLayout> 
    </ScrollView> 
    <Label row="0" text="overlay"></Label> 
</GridLayout>

通過使用相同的行它們將被放置在同一個地方。我使用這種技術來創建一個完整的搜索界面，當他們點擊搜索按鈕時，它將覆蓋部分屏幕。請注意;稍後在GridLayout中的項目會顯示在GridLayout前面的以上項目中。所以這就是Label被移動到GridLayout底部的原因，所以它將在ScrollLayout上方可見。

下面是實際的測試模板我所做的：

<Page id="Page" onloaded="pageLoaded" class=""> 
    <GridLayout rows="100,*"> 
     <ScrollView row="0"> 
     <StackLayout> 
      <Label visibility="{{ pageData.visible ? 'visible' : 'collapsed' }}" text="Hi1 this should appear/disappear" class ="lab1"/> 
      <Label visibility="{{ pageObs.visible ? 'visible' : 'collapsed' }}" text="Hi2 this should appear/disappear" class ="lab1"/> 
      <Label visibility="{{pageData, pageData.visible ? 'visible' : 'collapsed' }}" text="Hi3 this should appear/disappear" class ="lab1"/> 
      <Label left="10" top="70" visibility="{{visible ? 'visible' : 'collapsed' }}" text="Hi4 this should appear/disappear" class ="lab1"/> 
      <Label text="{{pageObs.visible}}"/> 
      <Label text="I'm at 120"/> 
      <Button text="tap" tap="onTap"/> 
      <Label text="Another text"/> 
      <Label text="Another text 2"/> 
     </StackLayout> 
     </ScrollView> 
     <Label row="0" text="Overlay"/> 
     <Label row="1" text="Grid row 1"/> 
    </GridLayout> 

</Page>

這種佈局有兩個網格行，這樣就可以看到了滾動的結束位置;第一行具有滾動型和我從我提交了錯誤的答案「疊加」

來源

2016-04-14 20:51:55 Nathanael

滾動仍然使用此佈局中斷。 – jonnysamps

我用我使用的實際測試模板更新了答案，並且顯示它正在工作的動畫gif ... – Nathanael

雅，那個佈局也不起作用。它必須是一個本地腳本錯誤。我會記錄它。 – jonnysamps

Angular Nativescript - 在AbsoluteLayout中使用ScrollView

回答

相關問題