如何让 StackLayout 1 和 StackLayout 2 同时滚动答案

【问题标题】：How to Let Scroll Both StackLayout 1 and StackLayout 2 together如何让 StackLayout 1 和 StackLayout 2 同时滚动
【发布时间】：2018-09-26 19:19:34
【问题描述】：

Image for how two Stack layouts arranged

    <ScrollView orientation="horizontal">


          <GridLayout rows="auto">
            <StackLayout row="0" backgroundColor="lightblue">
                <GridLayout columns="{{gridColmns}}">
                    <ng-container *ngFor="let listItem of header let i 
   = index " scrollDirection="horizontal" orientation="vertical">
                        <Label margin="2 2 2 2" [col]="i" 
  textWrap="true" class="tcB"  [text]=listItem.headerName></Label>
                    </ng-container>
                </GridLayout>
            </StackLayout>
        </GridLayout>
 </ScrollView>

 <ScrollView>
 <ScrollView orientation="horizontal">
        <GridLayout rows="auto">

            <StackLayout row="0">
                <RadListView  #radList [items]="gridToMobile">
                    <ng-template tkListItemTemplate let-item="item" 
     let-itemIndex="index">
                        <StackLayout padding="5" 
   orientation="horizontal" class="positioning">
                            <GridLayout columns="{{gridColmns}}">
                                <ng-container *ngFor="let listItem of 
  item let i = index " scrollDirection="horizontal" 
   orientation="vertical">
                           <Label position="fixed" margin="2 
    2 2 2" [col]="i" textWrap="true" class="tcB"  
     [text]=listItem.value></Label>
                                </ng-container>
                            </GridLayout>
                        </StackLayout>
                    </ng-template>
                </RadListView>
            </StackLayout>
        </GridLayout>
   </ScrollView>

  </ScrollView>

上面是两个堆栈布局的代码任何无缝的方式让滚动同步两个堆栈布局。

已尝试使用另一个未按预期工作的触发滚动事件。

【问题讨论】：

你想让两个块独立垂直滚动，但水平锁步吗？
嘿，我希望两个块同步水平滚动，第一个块我想保持静态。
您是否尝试过反转您的ScrollView 收容措施？我不确定，但对我来说这应该有效。即<ScrollView orientation="horizontal"> <GridLayout></GridLayout> <ScrollView><RadListView></RadListView> </ScrollView> </ScrollView>

标签： nativescript angular2-nativescript nativescript-telerik-ui

【解决方案1】：

看起来顶部块是列表视图的标题。您可以使用列表视图的标题属性。

<ng-template tkListViewHeader>
<GridLayout rows="auto">
            <StackLayout row="0" backgroundColor="lightblue">
                <GridLayout columns="{{gridColmns}}">
                    <ng-container *ngFor="let listItem of header let i 
   = index " scrollDirection="horizontal" orientation="vertical">
                        <Label margin="2 2 2 2" [col]="i" 
  textWrap="true" class="tcB"  [text]=listItem.headerName></Label>
                    </ng-container>
                </GridLayout>
            </StackLayout>
        </GridLayout>
</ng-template>

【讨论】：