Как разрешить прокрутку как StackLayout 1, так и StackLayout 2 вместе - PullRequest
Новая
       38

Как разрешить прокрутку как StackLayout 1, так и StackLayout 2 вместе

0 голосов
/ 26 сентября 2018

Изображение для расположения двух макетов стека 

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

Выше приведен код для двух макетов стека. Любой простой способ синхронизировать прокрутку обоих макетов стека.

Уже пытались прокрутить события включения, но не работает должным образом.

1 Ответ

0 голосов
/ 02 октября 2018

Похоже, верхний блок является заголовком списка.Вы можете использовать свойство заголовка представления списка. 

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