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

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

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

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

Уже пробовал Firing Scrolling Events с другим, который не работает должным образом.


nativescript angular2-nativescript nativescript-telerik-ui
person sowmya    schedule 26.09.2018    source источник
comment
Вы хотите, чтобы два блока прокручивались независимо друг от друга по вертикали, но синхронизировались по горизонтали?   -  person Ian MacDonald    schedule 26.09.2018
comment
Эй, я хочу, чтобы два блока прокручивались по горизонтали синхронно, а первый блок я хочу оставить статичным.   -  person sowmya    schedule 27.09.2018
comment
Вы пробовали инвертировать свою ScrollView защитную оболочку? Я не знаю точно, но мне кажется, что это должно сработать. то есть <ScrollView orientation="horizontal"> <GridLayout></GridLayout> <ScrollView><RadListView></RadListView> </ScrollView> </ScrollView>   -  person Ian MacDonald    schedule 27.09.2018

Ответы (1)


arrow_upward
0
arrow_downward

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

<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>
person Narendra    schedule 02.10.2018