Список Nativescript с заголовком и прокруткой всей страницы

Я использую ListView с частью заголовка поверх него, как показано ниже,

<StackLayout>
  <StackLayout height="200">
    <Label text="Header content goes in this section"></Label>
  <StackLayout>
  <ListView [items]='posts'>
   <!-- template items goes here --> 
  </ListView>   
</StackLayout>

Когда мы прокручиваем до списка, заголовок в этом случае остается липким. Есть ли вариант, при котором прокрутка также переопределяет заголовок? Я имею в виду, что заголовок также является частью прокрутки.


nativescript angular2-nativescript
person Upender Devulapally    schedule 15.02.2017    source источник
comment
Попробуйте Scrollview вместо самого верхнего StackLayout   -  person Habeeb    schedule 15.02.2017

Ответы (3)


arrow_upward
1
arrow_downward

В приложении Fr Angular-2 вы теперь можете использовать директиву tkTemplateKey и создавать свои собственные заголовки, нижние колонтитулы, группы и другие настраиваемые элементы представления списка. Пример можно найти здесь

Вот код для просмотра списка с заголовком и группами.

page.component.html

<ListView [items]="countries" [itemTemplateSelector]="templateSelector" (itemTap)="onItemTapFirstList($event)" class="list-group" separatorColor="white">
    <ng-template nsTemplateKey="header" let-header="item">
        <Label [text]="header.name" class="list-group-item h3 bg-primary" isUserInteractionEnabled="false" color="white" fontSize="24"></Label>
    </ng-template>
    <ng-template nsTemplateKey="footer" let-footer="item">
        <Label [text]="footer.name" class="list-group-item" backgroundColor="gray"></Label>
    </ng-template>
    <ng-template nsTemplateKey="cell" let-country="item">
        <StackLayout class="list-group-item">
            <Label [text]="country.name" class="list-group-item-heading"></Label>
            <Label [text]="country.desc" class="list-group-item-text" textWrap="true"></Label>
        </StackLayout>
    </ng-template>
</ListView>

page.component.ts

@Component({
    moduleId: module.id,
    templateUrl: "./multi-line-grouped.component.html",
    changeDetection: ChangeDetectionStrategy.OnPush
})
export class MultiLineGroupedListViewExampleComponent implements OnInit {
    public countries: Array<any> = [];

    public templateSelector = (item: any, index: number, items: any) => {
        return item.type || "cell";
    }

    ngOnInit() {
        for (let i = 0; i < mockedCounties.length; i++) {
            this.countries.push(mockedCounties[i]);
        }
    }

    onItemTapFirstList(args: ItemEventData) {
        console.log(args.index);
    }
}
person Nick Iliev    schedule 15.02.2017
comment
получаю ошибку, что let поддерживается только в шаблоне ng-template, а не в шаблоне! - person HelloWorld; 24.11.2018
comment
^^^ Вы правы! Я обновил фрагмент, чтобы использовать ng-template, так как теперь это можно сделать в Angular. - person Nick Iliev; 26.11.2018

arrow_upward
0
arrow_downward

Не уверен, что есть другой способ, но одним из способов может быть перемещение заголовка внутри списка. Чтобы это работало, он должен находиться в массиве сообщений, поэтому вы можете преобразовать его в какой-то класс-оболочку, который может содержать либо строку заголовка, либо строку элемента. Затем создайте два шаблона внутри списка, которые в зависимости от ключа шаблона отображают заголовок или элемент.

Подробнее о шаблонах см. в разделе https://docs.nativescript.org/cookbook/ui/list-view#define-multiple-item-templates-and-an-item-template-selector-in-xml.

person Eddy Verbruggen    schedule 15.02.2017
comment
является ли функция шаблона относительно новой в {N} (не Angular)? Никогда не видел его раньше. Я использую RadListView. Будет ли этот синтаксис работать в RLV? Я не делаю ничего необычного в RLV - есть ли причина не использовать базовый {N} ListView (т.е. поверх RLV)? - person dashman; 15.02.2017
comment
Начиная с версии 2.4. Вы можете использовать обычный LV, если вам не нужен добавленный сахар. - person Eddy Verbruggen; 15.02.2017

arrow_upward
-1
arrow_downward

Вы можете использовать *ng для создания списка. Вот пример кода для этого.

 <ScrollView>
  <StackLayout>
  //define your header over here
  <Label text="hey header"></Label>
   <StackLayout *ngFor="let item of <Array>">
    <GridLayout columns="4*,*" rows="*,">
         <Label  row="0" col="0" text="hey label"></Label>
    </GridLayout>
   <StackLayout>
  <StackLayout>
 </ScollView>
person Lakshaya Maheshwari    schedule 23.02.2017
comment
это очень неэффективно. - person ChanX; 22.11.2020