Question

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>

以上是两个堆栈布局的代码任何无缝的方式都可以使两个堆栈布局同步滚动。

已经尝试与其他人一起执行“触发滚动事件”，但未按预期工作。

Answer 1

看起来最上面的块是列表视图的标题。您可以使用列表视图的header属性。

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

如何让StackLayout 1和StackLayout 2一起滚动

1 个答案: